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: ['last 15 versions']
                                    })
                                ]
                            }
                        }
                    ]
                })
            },{
                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: ['last 15 versions']
                                    })
                                ]
                            }
                        }
                    ]
                })
            }
        ]
    },

我在我的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:width 2s;
}

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: ['last 15 versions']
                                    })
                                ]
                            }
                        },
                        { loader: 'less-loader'}
                    ]
                })
            }
        ]
    },

Answer 2

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.
以上是postcss-loader用法里面提示的。顺便问一下，你配置的时候有没有css文件里面@import less文件的情况？我有三个文件a.less是入口样式文件，b.css文件，然后我在b.css文件里面又@import了另一个less文件，然后web pack很正常的打包了，可是分离出来的文件里面我最后import的另一个less文件原封不动地打包了，包括里面的变量，问一下你有没有解决办法