如何与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.
更多推荐
发布评论