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.lessbody{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文件原封不动地打包了，包括里面的变量，问一下你有没有解决办法