Webpack：将 JS 转换为 SASS 和 CSS

Posted 2023-02-22

【中文标题】Webpack：将 JS 转换为 SASS 和 CSS

【英文标题】：Webpack: Converting JS to SASS and CSS

【发布时间】：2020-05-15 13:21:07

【问题描述】：

我的目标是从 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 有点不了解，因此非常感谢任何帮助。

【问题讨论】：

我认为您误解了每个插件的作用。 minicss 插件应该从 JS 中提取您导入的 CSS 字符串并使其成为自己的文件。据我所知，它不会从 DOM 本身中提取 CSS。 style-loader 将样式注入 DOM，但在此之前，您必须使用 sass-loader 将 SASS 转换为 CSS，并使用 css-loader 解析导入。我假设您正在尝试从您的 JS 对象创建一种 sass-variables 文件，对吗？在这种情况下，为什么不试试style-dictionary 之类的东西呢？

风格词典是我所需要的。谢谢你

【参考方案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";