Webpack 网页包：将JS转换为SASS和CSS

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

我有一个

themes.js

文件，其中包含两个保存我所有颜色模式的对象：

colorplate

和

themes

。我正在将这些对象导入我的入口点（

/src/index.js

）。入口点使用JS迭代所有选项板和主题，以创建一个大型SASS字符串。使用HtmlWebpack插件，我可以将其打印到DOM中。然而，我的主要目标是用这个输出字符串创建一个SASS文件。我使用了sass、style和css加载器以及

miniCssExtract

和

textextextract

插件，试图将此字符串捕获为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有点不了解，因此非常感谢您的帮助。

您可以参考我的代码

然后像这样在js中导入文件

import "style.scss";

---

我认为你误解了这些插件的作用。minicss插件应该从JS中提取导入的CSS字符串，并将其作为自己的文件。据我所知，它不会从DOM本身提取CSS。样式加载器将样式注入DOM，但在此之前，必须使用SASS加载器将SASS转换为CSS，并使用CSS加载器解析导入。我假设您要做的是从JS对象生成一种sass变量文件，对吗？在这种情况下，为什么不试试这样的东西呢？我需要的是传统风格。谢谢你

import "style.scss";