Webpack - 将 CopyWebpackPlugin 用于 scss 文件

Question

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

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

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

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

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

我怎样才能做到这一点？

Answer 1

您可以将 CopyWebpackPlugin 插件的转换选项与sass结合使用。 即使用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()，但现在已弃用。

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