Webpack - 对 scss 文件使用 CopyWebpackPlugin

Question

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

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

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

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

所以现在我所需要的就是将它添加一个从scssto css before 到 copying的转换。

我怎么能做到这一点？

Answer 1

您可以将CopyWebpackPlugin 插件的转换选项与node-sass. 即使用sass.renderSync函数 node-sass：

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')
  ]