问题
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.
I wrote following 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,
})
]
};
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')
}
and after this my styles.scss compiles to stylesheet.js, but i not to .css.
回答1:
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.
回答2:
You can use mini-css-extract-plugin.
https://github.com/webpack-contrib/mini-css-extract-plugin
I used the same plugin for extracting SASS to CSS using webpack 4 and it's working like a charm.
回答3:
The beta works well with webpack@4.13.0
npm install extract-text-webpack-plugin@next
来源:https://stackoverflow.com/questions/49632291/sass-loader-and-webpack-4