postcss对import引入的less文件无效

Question

这是我的webpack关于less里自动添加前缀的配置
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[
{
loader:'css-loader',
options:{
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
plugins:(loader)=>[
require('autoprefixer')({
browsers:['last15versions']
})
]
}
}
]
})
},{
test:/\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[
{
loader:'css-loader',
options:{
importLoaders:1
}
},
{loader:'less-loader'},
{
loader:'postcss-loader',
options:{
plugins:(loader)=>[
require('autoprefixer')({
browsers:['last15versions']
})
]
}
}
]
})
}
]
},
我在我的style.less文件里引用了一个test.less文件
@import'./test';
.yanwenocuf{
display:flex;
background:#000;
text-align:center;
}
.showImg{
background:url("../images/show.jpg");
width:400px;
height:400px;
background-size:cover;
transition:width2s;
}
test.less
body{
background:#234;
color:#000;
text-align:center;
display:flex;
background-size:cover;
}
经过webpack编辑之后style.less下的css都能自动加上浏览器内核前缀，但是只有引用的test.less里的加不了，这是怎么回事？

Answer 1

顺序换下module:{rules:[{test:/\.less$/,use:ExtractTextPlugin.extract({fallback:"style-loader",use:[{loader:'css-loader',options:{importLoaders:1}},{loader:'postcss-loader',options:{plugins:(loader)=>[require('autoprefixer')({browsers:['last15versions']})]}},{loader:'less-loader'}]})}]},

Answer 2

Aftersettingupyourpostcss.config.js,addpostcss-loadertoyourwebpack.config.js.Youcanuseitstandaloneorinconjunctionwithcss-loader(recommended).Useitaftercss-loaderandstyle-loader,butbeforeotherpreprocessorloaderslikee.gsass|less|stylus-loader,ifyouuseany.以上是postcss-loader用法里面提示的。顺便问一下，你配置的时候有没有css文件里面@importless文件的情况？我有三个文件a.less是入口样式文件，b.css文件，然后我在b.css文件里面又@import了另一个less文件，然后webpack很正常的打包了，可是分离出来的文件里面我最后import的另一个less文件原封不动地打包了，包括里面的变量，问一下你有没有解决办法