Webpack和PostCSS自动添加前缀无法编译Sass部分文件

Question

我正在使用Webpack编译Sass，但PostCSS自动添加前缀无法作用于被引入到style.scss入口点的局部文件。

直接将样式添加到style.scss中的样式可以正常添加前缀，但是任何作为@import引用的文件都没有被自动添加前缀。

我已经提供了参考的webpack.config、postcss.config和style.scss如下。

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'], 
    output: {
        filename: './js/bundle.js',
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/'
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {}  
                }
            ]
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader', 'postcss-loader']
            }),
            exclude: /node_modules/,
        }
    ]},

    plugins: [
        new ExtractTextPlugin({ filename: './css/style.css' })
    ]

};

postcss.config.js

module.exports = {
  map: false,
  plugins: {
    'autoprefixer': {browsers: ['last 2 versions', '> 5%']},
  }
}

style.scss

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import 'partials/admin'; 
@import 'partials/nav';
@import 'partials/photos';  
@import 'partials/no-results';  
.test{
   display: flex; // <- This is being prefixed as expected.
}

我是否错过了某种特殊的加载器或语法来获取自动添加前缀的 @import 文件？

* 编辑 *

我通过调整 scss 加载器的顺序解决了这个问题。

{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
     { loader: 'css-loader' },
     { loader: 'postcss-loader' },
     { loader: 'sass-loader', 
        options: {
           outputStyle: 'expanded'
        },
     }
   ]
}),
exclude: /node_modules/,
}

- Darren Cooney

---

是的，顺序很重要。Webpack中的加载器就像转换工具一样。一个加载器的输出是下一个加载器的输入。 - skyboyer

你应该将你的 EDIT 放在答案中并标记为正确。这对我也起作用了。 - a_b

Answer 1

您可能希望尝试postcss-scss

我还提供了一个postcss.config.js：

module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}

祝你好运

- Euripides Georgantzos

---

该模块不编译SCSS。 - Batman