postcss-loader配置好了,运行之后也没有报错,可是在浏览器中查看并没有加上前缀,问什么?

来源:4-4 处理项目中的 css

慕盖茨8583337

2017-05-24 16:47

postcss-loader配置好了,运行之后也没有报错,可是在浏览器中查看并没有加上前缀,好疑惑??麻烦老师、大神帮忙看下,谢谢!!

http://img.mukewang.com/592548750001efcf07400950.jpghttp://img.mukewang.com/59254942000155d816140483.jpg


以下是代码:

var htmlWebpackPlugin=require("html-webpack-plugin");

var path=require('path');

var webpack = require('webpack');

module.exports={

     entry:"./src/app.js",

     output:{

         path:"/webpack_demo/dist",

         filename:"js/[name].js",

     },

     module:{

         rules:[

             {

                 test:/\.js$/,

                 loader:'babel-loader',

                 exclude:path.resolve(__dirname,'node_modules'),

                 include:path.resolve(__dirname,'src/'),

                 query:{

                 presets:['latest']

             }

             },

             {

                 test:/.\css$/,

                 loader:'style-loader!css-loader?importLoaders=1!postcss-loader'

             }

        

         ]

     },

     plugins:[

             new htmlWebpackPlugin({

                     template:"index.html",

                     filename:"index.html",

                     inject:"body"

             }),

             new webpack.LoaderOptionsPlugin({

                      options: {

                                postcss: function() {

                                          return [

                                            require('autoprefixer')({

                                              broswers: ['last 5 versions']

                                            })

                                          ]

                                }

                      }

                })

     ]

}


写回答 关注

3回答

  • 倾城一笑stu
    2019-09-17 00:24:43
    module.exports = {plugins: [require('autoprefixer')({// browsers: ["last 5 versions"]overrideBrowserslist: ["last 5 versions"]})]}

    倾城一笑st...

    module.exports = { plugins: [ require('autoprefixer')({ // browsers: ["last 5 versions"] overrideBrowserslist: ["last 5 versions"] }) ] }

    2019-09-17 00:25:24

    共 1 条回复 >

  • wy00812
    2017-12-26 16:12:30

    同问,我也碰到这个问题了

  • 落叶_uanei
    2017-09-24 00:47:59

    {
       test:/\.less$/,
       loaders:['style-loader','css-loader',{
           loader: 'postcss-loader',
           options: {
               plugins: [
                   require('autoprefixer')({
                       browsers: ["last 5 versions"]
                   })
               ]
           }
       },'less-loader']
    }


    1. 我是使用这种方式能够实现(flex在common.css里边的时候管用)

    2. 但是在使用@import引入别的css的时候importLoaders=1和后变的postcss-loader出现了问题。

    3. 老师上课用的webpack才1.x,先在使用的都快3.x了,所以有版本的问题。

webpack深入与实战

webpack实战教程,用真实项目带你探索 webpack 强大的功能

86561 学习 · 721 问题

查看课程

相似问题