Webpack：将JS转换为SASS和CSS

Question

我的目标是从包含所有我要迭代的主题和颜色的Javascript文件创建一个SASS和CSS文件。

我有一个themes.js文件，其中包含两个保存我所有颜色模式的对象：colorPalette和themes。我将这些对象导入到我的入口点（./src/index.js）中。入口点使用JS遍历所有调色板和主题以创建大的SASS字符串。使用HtmlWebpack插件，我可以将其打印到DOM。但是，我的主要目标是使用此输出字符串创建一个SASS文件。我使用了sass，style和css加载程序以及miniCssExtract和textExtract插件来尝试将此字符串捕获为SASS文件。我已经使用了很多配置（添加了多个插件，将它们全部删除，等​​等），但是下面是我的最新迭代：

var config = { 
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['style-loader','css-loader', 'sass-loader']
        })
      }
    ]
  }
}

var clientConfig = ({ mode, presets } = { mode: "production", presets: [] }) => {
  return webpackMerge(
    {
      mode,
      plugins: [ new HtmlWebpackPlugin()]
    },
    modeConfig(mode),
    presetConfig({ mode, presets }),
  Object.assign({}, config, {
    name:"main",
    entry: "./src/index",
    output: {
      path: path.resolve(__dirname +'dist'),
      filename: "bundle.js"
    }
    })
  )
}

module.exports = [clientConfig]

我了解webpack输出的文件是运行时文件，它是由多个模块组成的数组，但这些模块被包装起来，但是我不知道如何（或者是否应该使用）生成我的SASS文件。我觉得我对如何使用Webpack有点不了解，因此非常感谢您的帮助。

Answer 1

您可以参考我的代码here

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

然后只需像这样将文件导入您的js

import "style.scss";