webpack配置postcss-loader报错_Web开发_编程问答

webpack配置postcss-loader报错

来源:互联网  时间:2018/1/29 2:45:36

关于网友提出的“ webpack配置postcss-loader报错”问题疑问,本网通过在网上对“ webpack配置postcss-loader报错”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: webpack配置postcss-loader报错
描述:

我用的是webpack3.10.0的版本,配置webpack postcss-loader报错,慕课上视频是版本1
这是我的配置
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

const config = {

context: __dirname,
entry: './src/app.js',
output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].bundle.js'
},
module: {
    loaders: [{
        test: '/\.js$/',
        loader: 'babel',
        query: {
            presets: ['latest']
        }
    }, {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
    }]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions']
    })
],
plugins: [
    new htmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: 'body'
    })
]

}

module.exports = config;

报错如下图所示


解决方案1:

webpack3的语法发生了变化,需要新建一个文件postcss.config.js,内容是

module.exports = {
    plugins: [
        require('postcss-import'), //需要安装 npm install postcss-import --save-dev,这句代码是会对一个js文件里面import进来的多个css放在同一个style里面,如果是多个文件引入就会生成多个
        require('autoprefixer')({
            broswers: ['>1%', 'last 5 versions', 'Firefox ESR', 'not ie < 9']
        })
    ]
}

然后webpack.config.js中配置loaders为


    {
            test: /\.css$/,
            //这里用数组方式或者loader字符串连接方式都可以
            use: [
                'style-loader',
                'css-loader?importLoaders=1', //对于css中@import进来的css同样做前缀处理
                'postcss-loader'
            ]
        }

解决方案2:

请参考官方文档:https://webpack.js.org/loader...

上一篇vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?
下一篇(html5)这种格式的数据应该如何去调用?
明星图片
相关文章
《 webpack配置postcss-loader报错》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)