时间戳

首页 > 解决方案 > Leafo/scssphp 忽略子目录中的文件

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

问题描述

Leafo/scssphp 工作正常，除了文件在子目录中时，我尝试了 addImportPath 但仍然无法包含那些子目录文件，这是我的 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.'"');

不添加重置、占位符、排版、标题、按钮和 switch_button 等文件。

谢谢

标签： phpsasslessscss-mixins

解决方案

根据我在他们的文档中的理解： https ://scssphp.github.io/scssphp/docs/

当您使用 @import 指令导入文件时，您的 PHP 脚本的当前路径默认用作搜索路径。这通常不是您想要的，因此有两种操作导入路径的方法：addImportPath 和 setImportPaths。

addImportPath($path) 将 $path 附加到搜索的导入路径列表中。

setImportPaths($pathArray) 将用 $pathArray 替换整个导入路径。如果 $pathArray 的值不是一个数组，它将被转换为一个数组。

所以，我会这样做：

$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。但是你可以试试这个，它可能会给你一个起点。

推荐阅读