javascript - Webpack - 对 scss 文件使用 CopyWebpackPlugin

Question

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

这些文件不是模块的一部分，所以我无法通过 *.scss 加载器导入它们(即 import "myStyle.scss")。

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

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

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

我怎样才能做到这一点？

Answer 1

您可以使用 transform CopyWebpackPlugin 插件选项与 sass 结合使用。 IE。使用 sass.compile功能:

const sass = require('sass');

plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'style.scss',
        to: 'style.css',
        transform: (content, path) => {
          return sass.compile(path).css
        },
      }
    ],
  ),
]

请注意，较早的答案可能建议使用 sass.renderSync()，但现在是 deprecated .