Question

我正在使用Webpack编译Sass，并且PostCSS autoprefixer无法处理导入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文件autoprefixed？

*编辑*

我能够通过调整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/,
}

Answer 1

您可能想尝试postcss-scss

我进一步提供了postcss.config.js：

<main>

祝你好运

Webpack和PostCSS Autoprefixer没有编译Sass部分

1 个答案: