[英]Webpack - use CopyWebpackPlugin for scss files
I want to convert some files from *.scss
extension to *.css
one and then copy them to the target folder .我想将一些文件从
*.scss
扩展名转换为*.css
一个,然后将它们复制到目标文件夹。
These files aren't a part of a module so I can't import them by the *.scss
loader (ie import "myStyle.scss"
).这些文件不是模块的一部分,因此我无法通过
*.scss
加载器导入它们(即import "myStyle.scss"
)。
I know how to copy files by the CopyWebpackPlugin plugin -我知道如何通过CopyWebpackPlugin插件复制文件 -
plugins: [
new CopyWebpackPlugin([
{ from: 'source/myStyle.scss', to: 'myStyle.css' }
])
]
So now all I need is to add it a conversion from scss
to css
before to copying .所以现在我只需要在复制之前添加一个从
scss
到css
的转换。
How could I achieve that ?我怎么能做到这一点?
You can use transform option of CopyWebpackPlugin plugin in conjunction with sass
.您可以将 CopyWebpackPlugin 插件的transform选项与
sass
结合使用。 Ie use the sass.compile
function:即使用
sass.compile
函数:
const sass = require('sass');
plugins: [
new CopyWebpackPlugin(
[
{
from: 'style.scss',
to: 'style.css',
transform: (content, path) => {
return sass.compile(path).css
},
}
],
),
]
Note that older answers may recommend using sass.renderSync()
, but this is now deprecated .请注意,较旧的答案可能建议使用
sass.renderSync()
,但现在 已弃用。
You'll need sass-loader
for that.为此,您将需要
sass-loader
。 For more info, check out https://github.com/webpack-contrib/sass-loader有关更多信息,请查看https://github.com/webpack-contrib/sass-loader
Update: Try something like this.更新:尝试这样的事情。
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('myStyle.css')
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.