Sass 加载器和 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.
webpack
4 还不能单独输出独立的 *.css
文件。要获得单独的 *.css
文件,您需要使用 extract-text-webpack-plugin
to pull out all the CSS into its own entry chunk. This is a good tutorial.
您可以使用 mini-css-extract-plugin.
https://github.com/webpack-contrib/mini-css-extract-plugin
我使用相同的插件使用 webpack 4 将 SASS 提取到 CSS,它工作得非常棒。
测试版适用于 webpack@4.13.0
npm install extract-text-webpack-plugin@next
如果符合您的要求,您可以将 sass-loader@10.1.1 与 Webpack 4 一起使用。
sass-loader 的 11.0.0 版引入了这个最小的 webpack 5 支持版本中断更改。您可以在 https://openbase.com/js/sass-loader/versions
查看更新日志
如何在 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.
webpack
4 还不能单独输出独立的 *.css
文件。要获得单独的 *.css
文件,您需要使用 extract-text-webpack-plugin
to pull out all the CSS into its own entry chunk. This is a good tutorial.
您可以使用 mini-css-extract-plugin.
https://github.com/webpack-contrib/mini-css-extract-plugin
我使用相同的插件使用 webpack 4 将 SASS 提取到 CSS,它工作得非常棒。
测试版适用于 webpack@4.13.0
npm install extract-text-webpack-plugin@next
如果符合您的要求,您可以将 sass-loader@10.1.1 与 Webpack 4 一起使用。
sass-loader 的 11.0.0 版引入了这个最小的 webpack 5 支持版本中断更改。您可以在 https://openbase.com/js/sass-loader/versions
查看更新日志