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。使用原始加载器，这仍然包括＆＃39; modules.export＆＃39;前缀，所以我不能将其保存为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"
}

<强> main.scss

@import "settings.json"

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