Leafo/scssphp 忽略子目录中的文件

Question

leafo/scssphp works fine, except when the files are in the sub-directories, I tried addImportPath but still couldn't include those sub-directory files, here is my scss code.

.my-parent-container {
    background-color: $body-background;
    @import './base/reset';
    @import './abstracts/placeholders';
    @import './base/typography';
    @import './layout/header';
    @import './components/buttons';
    @import './components/switch_button';
}

PHP code

$scss = new \Leafo\ScssPhp\Compiler();
$scss_path = base_path('public/assets/tmpl-scss/style.scss');
$scss->setVariables($colors);
$css = $scss->compile('@import "'.$scss_path.'"');

the files such as reset, placeholders, typography,header,buttons and switch_button are not added.

Thank you

Answer 1

From what I can understand in their documentation: https://scssphp.github.io/scssphp/docs/

When you import a file using the @import directive, the current path of your PHP script is used as the search path by default. This is often not what you want, so there are two methods for manipulating the import path: addImportPath, and setImportPaths.

addImportPath($path) will append $path to the list of the import paths that are searched.

setImportPaths($pathArray) will replace the entire import path with $pathArray. The value of $pathArray will be converted to an array if it isn't one already.

So, I would do it like this:

$scss = new \Leafo\ScssPhp\Compiler();
$scss_path = base_path('public/assets/tmpl-scss/style.scss');
$scss->setImportPaths([
    'public/assets/tmpl-scss/'
    'public/assets/tmpl-scss/base/',
    'public/assets/tmpl-scss/abstracts/',
    'public/assets/tmpl-scss/layout/',
    'public/assets/tmpl-scss/components/',
]);
$scss->setVariables($colors);
$css = $scss->compile('@import "'.$scss_path.'"');

And in the CSS:

.my-parent-container {
    background-color: $body-background;
}

@import 'reset';
@import 'placeholders';
@import 'typography';
@import 'header';
@import 'buttons';
@import 'switch_button';

Also, you might want to take a look at source maps: https://scssphp.github.io/scssphp/docs/#source-maps

I am not sure if this will work because I never personally used the Leafo ScssPhp. But you can try this and it might give you a starting point.