如何使用Webpack导入/要求的包中的SCSS变量？

Question

我正在重写一堆HTML + CSS + JS以使其更加模块化。我刚开始并且有两个NPM包：

1. 核心有一些SCSS：

   index.js

   require("./styles/variables.scss");
   require("./styles/test-import.scss");
   

   风格/ variables.scss

   $color-primary: rgb(0, 123, 196);
   $color-type-main: rgb(51, 51, 51);
   

   风格/测试import.scss

   @import "variables";
   body { background: $color-primary }
   

2. 测试需要核心，并希望使用变量：

   index.js

   require("core");
   require("./styles/test.scss");
   

   风格/ test.scss

   body { background: $color-primary; }
   

Core使用Webpack构建得很好。测试失败，因为它找不到$ color-primary。

我考虑过的一个选项是直接导入变量文件，即

require("./node_modules/core/styles/variables");

......但这似乎不太可扩展。 NPM可以随时决定改变他们构建目录的方式。

Answer 1

您必须在每个Sass文件中显式加载任何依赖项（例如，您的变量部分），因为每个文件都是独立编译的。但是，为了更容易：

• 您可以使用baggage-loader自动为文件添加require。使用loader config的正则表达式可以帮助您缩小插入位置的范围，如果你不需要它。
• 如果您的导入前缀为`，则webpack将使用其require分辨率来解析导入。由于webpack允许您指定分辨率的别名（以及一些其他灵活的选项），您可以抽象出需要导入的内容的实际位置，如果需要移动所需的文件，只需更新您的webpack解析器配置。