如何在 Webpack 中配置 loader 来处理 CSS、Less 和 Sass 文件?
需要在 webpack.config.js 的 module.rules 数组中添加相应的规则。例如,对于 CSS 文件,使用 style-loader 和 css-loader;对于 Less 文件,还需要添加 less-loader;对于 Sass 文件,则需要 sass-loader 和 css-loader。配置示例如下:
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'less-loader', // compiles Less to CSS
],
},
{
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
]
}
注意:这里简化了 Less 和 Sass 的配置,实际项目中可能需要更多配置选项,如 sourceMap。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。