问题已经解决,由采纳答案者提醒了下,是我大意忘记添加less-loader,添加完毕以后,2个问题均解决。
webpack
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourcemap: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
//新增less-loader即可
{
loader: "less-loader"
},
{
loader: 'postcss-loader',
}
],
include: paths.appSrc
},
配置完以后,less文件中若涉及以下2个问题的时候,会报错:
问题1: 当less里引入路径,是经过webpack resolve过后的,会编译不通过。
test.less
.test{
background: url(webpackConfigPath/logo.png);
}
webpack
resolve: {
// ...
alias: {
'webpackConfigPath': paths.appSrc,
},
//...
}
问题2:无法使用less里的层叠关系
.a{
background: red;
.b{
font-size: 12px;
}
}
<p className={style.b}></p> //获取不到样式
less 不是需要 less-loader 吗?