postcss對import引入的less文件無效

這是我的webpack關(guān)于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;
}

經(jīng)過webpack編輯之后style.less下的css都能自動加上瀏覽器內(nèi)核前綴，但是只有引用的test.less里的加不了，這是怎么回事？

回答

編輯回答

陌南塵

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文件原封不動地打包了，包括里面的變量，問一下你有沒有解決辦法

2017年7月24日 04:28

編輯回答

玩控

順序換下

     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'}
                    ]
                })
            }
        ]
    },

2018年5月10日 08:04