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还有些疑惑，希望能得到帮助。

- william_drew_67

---

我认为你误解了这些插件的作用。minicss插件应该从JS中提取导入的CSS字符串并将其制作成自己的文件。据我所知，它不会从DOM本身中提取CSS。style-loader将样式注入到DOM中，但在此之前，您必须使用sass-loader将SASS转译为CSS，并使用css-loader解析导入。我猜想你想做的是从JS对象中创建一种_sass-variables_文件，对吗？如果是这样，为什么不尝试像style-dictionary这样的东西呢？ - eMontielG

样式字典正是我所需要的。谢谢这个。 - william_drew_67

Answer 1

你可以参考我的代码这里

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

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

import "style.scss";

- Tony Ngo