问题描述
如何在webpack 4中使用sass loader?我读了很多关于这一点,大多数网站建议使用ExtractTextPlugin,但ExtractTextPlugin不适用于webpack 4.
How to use sass loader with webpack 4? I read a lot about this and most sites recomended to use ExtractTextPlugin, but ExtractTextPlugin doesn't work with webpack 4.
我写了以下 webpack.config.js :
const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
]
},
plugins: [
new ClosureCompilerPlugin({
compiler: {
language_in: 'ECMASCRIPT6',
language_out: 'ECMASCRIPT3',
compilation_level: 'ADVANCED'
},
concurrency: 3,
})
]
};
输出.js文件效果很好,但我的.scss没有编译成css。我试图添加入口点:
Output .js file works well, but my .scss didn't compile to css. I'm tried to add entry points:
entry: {
stylesheet: path.resolve('src', 'scss/styles.scss'),
main: path.resolve('src', 'index.js')
}
之后我的styles.scss编译成stylesheet.js,但我不是.css。
and after this my styles.scss compiles to stylesheet.js, but i not to .css.
推荐答案
webpack
4还无法自行输出独立的 *。css
文件。要获得单独的 *。css
文件,您需要使用将所有CSS拉出到自己的入口块中。这是。
webpack
4 is not yet capable of outputting standalone *.css
file on its own. To get a separate *.css
file, you need to use the extract-text-webpack-plugin
to pull out all the CSS into its own entry chunk. This is a good tutorial.
这篇关于Sass loader和webpack 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!