如何为所有 scss 文件定义 sass 变量

Posted 2023-03-06

【中文标题】如何为所有 scss 文件定义 sass 变量

【英文标题】：How to define sass variables for all scss files

【发布时间】：2018-03-10 13:52:02

【问题描述】：

在我的项目中，我使用了许多 scss 文件（超过 100 个文件）。 文件结构类似于 BEM 项目。

scss/
--block/block.scss
----/__elem/block__elem.scss
--menu/menu.scss
----/__elem/menu__elem.scss

等等... 所有文件都使用 gulp-sass 插件编译为 css 文件并连接到 1 个 css 文件 app.css 同一个文件夹我有 2 个 scss 文件。

_variables.scss - 用于定义自定义变量 style.scss - 主文件（我使用该文件导入我的变量）。

scss/

_variables.scss

style.scss

在 style.scss 文件中包含带变量的导入行

@import "utilities/variables";

是的，style.scss 文件中的所有变量都已成功定义，但是如何为其他 scss 文件（文件夹和子文件夹中的所有 scss 文件）定义我的变量？

对于 gulp 项目中除了 style.scss 之外的其他文件给出错误消息：

out:     error sass/menu/menu.scss (Line 5: Undefined variable: "$laptop".)

提前致谢。

【参考方案1】：

我解决了这个问题。现在我只是将所有 scss 文件与变量连接起来，然后才将它们连接到通用 css。 像这样的：

sass/**/*.scss + _variables.scss> app.scss > app.css