postcss - webpack 处理css如何自动加上浏览器前缀？

问题描述

问 题

module.exports = {
    // js 入口文件
    entry: {
        index: './src/js/index.js',
        about: './src/js/about.js',
        pages: './src/js/pages.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: "js/[name].[hash].bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: CssLoader.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }, {
            test: /\.scss$/,
            use: CssLoader.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [autoprefixer({
                            browsers: ['last 2 versions', 'Android >= 4.0', 'iOS 7'],
                            remove: true,
                        })]
                    }
                }],
                allChunks: true
            })
        }, {
            test: /\.html$/,
            loader: "html-loader?attrs=img:src img:data-src"
        }, {
            test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=./fonts/[name].[ext]'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
        }]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', 
            chunks: ['index', 'pages', 'about'], 
            minChunks: 3 
        }),
        CssLoader,
        ...
    ],
    devServer: {
        contentBase: './',
        host: 'localhost',
        port: 9090, //默认8080
        inline: true, //可以监控js变化
        hot: true, //热启动
    }
}

然后生成的css文件并没有跑autoprefixer，没有自动加上浏览器前缀。
求解。

about.css :

@import url('../scss/about.scss');

about.scss :

h2{
    color: #eee;
    background: #333;
    transform: rotate(-45deg)
}

生成的 about.css :

h2{
    color: #eee;
    background: #333;
    transform: rotate(-45deg)
}

解决方案

{
    test: /\.(scss|sass|css)$/,
    loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader?importLoaders=2!postcss-loader!sass-loader"})
}

主要是配置 css-loader 后的 importLoaders 参数，表示 css-loader 在处理import的资源前，需要加载哪个加载器。

参数意思是：

The query parameter importLoaders allows to configure how many loaders before css-loader should be applied to @imported resources.

官方示例：

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

这篇关于postcss - webpack 处理css如何自动加上浏览器前缀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！