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文件设置为入口点时，输出不在我的输出目录中。

有什么办法可以：

Answer 1

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

settings.json

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

main.scss

@import "settings.json"

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