leafo/scssphp 忽略 sub-directories 中的文件

Question

leafo/scssphp 工作正常，除非文件在 sub-directories 中，我尝试了 addImportPath 但仍然无法包含那些 sub-directory 文件，这是我的 scss 代码。

.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代码

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

未添加重置、占位符、排版、header、按钮和 switch_button 等文件。

谢谢

Answer 1

根据我在他们文档中的理解： 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.

所以，我会这样做：

$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.'"');

并且在 CSS 中：

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

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

此外，您可能想查看源映射：https://scssphp.github.io/scssphp/docs/#source-maps

我不确定这是否有效，因为我从未亲自使用过 Leafo ScssPhp。但是你可以试试这个，它可能会给你一个起点。

leafo/scssphp 忽略 sub-directories 中的文件

leafo/scssphp Ignoring files in sub-directories

php

sass

less

scss-mixins