Javascript Sass 加载器和 webpack 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49632291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sass loader and webpack 4
提问by Jonhy Beebop
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 4 中使用 sass 加载器？我阅读了很多关于此的内容，大多数网站都推荐使用 ExtractTextPlugin，但 ExtractTextPlugin 不适用于 webpack 4。
I wrote following webpack.config.js:
我写了以下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:
输出 .js 文件运行良好，但我的 .scss 没有编译为 css。我试图添加入口点：
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.
在此之后，我的styles.scss 编译为stylesheet.js，但我不会编译为.css。
采纳答案by Huy Nguyen
webpack4 is not yet capable of outputting standalone *.cssfile on its own. To get a separate *.cssfile, you need to use the extract-text-webpack-pluginto pull out all the CSS into its own entry chunk. This is a good tutorial.
webpack4 尚不能*.css自行输出独立文件。要获得一个单独的*.css文件，您需要使用 将extract-text-webpack-plugin所有 CSS 提取到其自己的入口块中。这是一个很好的教程。
回答by Hamed
You can use mini-css-extract-plugin.
您可以使用 mini-css-extract-plugin。
https://github.com/webpack-contrib/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.
我使用相同的插件使用 webpack 4 将 SASS 提取到 CSS，并且它的工作原理非常棒。
回答by Tomek
The beta works well with [email protected]
测试版与 [email protected]
npm install extract-text-webpack-plugin@next
npm install extract-text-webpack-plugin@next
