如何使用 webpack pre-load SASS 自定义实用程序(变量和混合)
How to pre-load SASS custom utilities (variables and mixins) with webpack
我正在 base.scss
中加载我的实用程序和资产,就像这样
@import "_variables";
@import "_mixins";
...
我的应用程序中有大量模块,我们正在对这些模块进行大量更改。
所以在每个 scss 文件的 header 中导入 base.scss
会造成很多麻烦,而且看起来非常多余。
我尝试使用 sass 的 includePaths 但它没有帮助,因为它只解析 @import 声明。
有什么方法可以自动导入我的实用程序,而无需在每个文件中手动 @import 它?
这个加载程序会完成这项工作
https://github.com/shakacode/sass-resources-loader
通过将此添加到您的 webpack 配置
sassResources: [ './path/to/vars.scss', './path/to/mixins.scss' ]
更新
查看 this boilerplate
中的实际实施
我正在 base.scss
中加载我的实用程序和资产,就像这样
@import "_variables";
@import "_mixins";
...
我的应用程序中有大量模块,我们正在对这些模块进行大量更改。
所以在每个 scss 文件的 header 中导入 base.scss
会造成很多麻烦,而且看起来非常多余。
我尝试使用 sass 的 includePaths 但它没有帮助,因为它只解析 @import 声明。
有什么方法可以自动导入我的实用程序,而无需在每个文件中手动 @import 它?
这个加载程序会完成这项工作
https://github.com/shakacode/sass-resources-loader
通过将此添加到您的 webpack 配置
sassResources: [ './path/to/vars.scss', './path/to/mixins.scss' ]
更新
查看 this boilerplate