javascript - Webpack 提取 SASS SCSS 到 js 或 json 文件

Question

对于我目前正在进行的元素，我正在使用 webpack 构建一个 Angular 应用程序，它将具有多个主题/样式表。我目前正在将主题样式表提取到单独的 CSS 文件中，这非常完美。

但是，我的所有主题变量都在单独的 SCSS 文件中，我的 Angular 代码中也需要这些变量。现在，由于 AOT 编译，我无法导入变量 SCSS 文件。

我正在为特定主题文件使用下面的 webpack 设置:

{
   "include" :["vars.scss"],
   "test": /\.scss$|\.sass$/,
   "loaders": ["sass-variable-loader"]
}

当我使用 ExtractTextWebpack 插件时，我可以使用 raw-loader 将其保存到 .txt 文件(使用 JSON 对象中的变量)，但无法将其保存到 JS。使用 raw-loader 这仍然包含 'modules.export' 前缀，所以我也不能将其保存为 json...

当我将此 vars SCSS 文件设置为入口点时，输出不在我的输出目录中。

有什么办法可以:

1. 将 SCSS 变量转换为 JSON 或 JS？
2. 将此数据保存到输出目录中的 JSON 或 JS 文件？

Answer 1

您可以将共享变量放入 JSON 文件，然后将它们同时导入 SASS 和 JS，而不是将变量从 SASS 导出到 JSON。您应该可以使用 node-sass-json-importer 在 Angular 中做到这一点包。

settings.json

{
    "background-colour": "#FFF",
    "foreground-colour": "#333"
}

ma​​in.scss

@import "settings.json"

body {
    color: $foreground-colour;
    background-color: $background-colour;
}