Sass loader和webpack 4(Sass loader and webpack 4)

Sass loader和webpack 4(Sass loader and webpack 4)

如何与webpack 4一起使用sass loader？ 我读了很多关于这个和大多数网站推荐使用ExtractTextPlugin，但ExtractTextPlugin不适用于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。 我试图添加入口点：

entry: { stylesheet: path.resolve('src', 'scss/styles.scss'), main: path.resolve('src', 'index.js') }

并在此之后我的styles.scss编译为stylesheet.js，但我没有.css。

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.

最满意答案

webpack 4目前还不能单独输出独立的*.css文件。 要获得单独的*.css文件，您需要使用extract-text-webpack-plugin将所有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.