3

我正在使用 Webpack 编译 Sass，而 PostCSS 自动前缀无法处理导入到style.scss入口点的部分。

将样式直接添加到style.scss按预期添加前缀，但任何引用为 an 的文件@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%']},
  }
}

样式.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/,
}
4

1 回答 1

2

您可能想尝试postcss-scss

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

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

祝你好运

于 2018-01-12T10:54:12.527 回答