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

【问题标题】：How do I use an SCSS variable from a package imported/required by Webpack?如何使用 Webpack 导入/需要的包中的 SCSS 变量？
【发布时间】：2016-05-17 04:44:57
【问题描述】：

我正在重写一堆 HTML+CSS+JS 以更加模块化。我开始很简单，有两个 NPM 包：

Core 有一些 SCSS：

index.js

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

样式/变量.scss

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

styles/test-import.scss

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

Test 需要 Core 并希望使用变量：

index.js

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

styles/test.scss

body { background: $color-primary; }

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

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

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

...但这似乎不太可扩展。 NPM 可以随时决定更改其目录结构。

【问题讨论】：

标签： sass npm webpack

【解决方案1】：

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

您可以使用baggage-loader 自动将require 添加到文件中。如果您在任何地方都不需要它，使用加载器配置的正则表达式可以帮助您缩小插入发生的范围。
如果您在导入前加上 `，webpack 将使用其 require 解析来解析导入。由于 webpack 允许你为解析指定别名（以及许多其他灵活的选项），你可以抽象出你需要导入的东西的实际位置，如果需要移动所需的文件，只需更新你的 webpack 解析器配置。李>

【讨论】：