Question

我想将一些文件从*.scss扩展名转换为*.css一个，然后将它们复制到目标文件夹。

这些文件不是模块的一部分，因此我无法通过*.scss加载程序（即import "myStyle.scss"）导入它们。

我知道如何通过CopyWebpackPlugin插件复制文件 -

plugins: [
    new CopyWebpackPlugin([    
        { from: 'source/myStyle.scss', to: 'myStyle.css' }
    ])
]

所以现在我需要的是在复制之前添加从scss到css的转换。

我怎么能实现这一目标？

Answer 1

您可以将CopyWebpackPlugin插件的transform选项与node-sass结合使用。即使用node-sass中的sass.renderSync函数：

const sass = require('node-sass');

plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'style.scss',
        to: 'style.css',
        transform (content, path) {
          const result = sass.renderSync({
            file: path
          });

          return result.css.toString();
        },
      }
    ],
  ),
]

Answer 2

您需要sass-loader。有关详细信息，请查看https://github.com/webpack-contrib/sass-loader

更新：尝试这样的事情。

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('myStyle.css')
  ]

Webpack - 使用CopyWebpackPlugin获取scss文件

2 个答案: