美文网首页
5.Loader打包css文件增加前缀

5.Loader打包css文件增加前缀

作者: 风雪之隅_b6f7 | 来源:发表于2019-03-26 10:32 被阅读0次

    打包css文件   /sass / less以及

    自动添加css样式厂商前缀

    1.npm install style-loader css-loader -D

    npm installsass-loader node-sass webpack --save-dev

    npm install less-loader --save-dev

    npm i -D postcss-loader

    2.默认配置文件webpack.config.js

    const path=reuqire('path');

    module.exports={

    entry:'./src/index.js',//入口文件

    output:{

              filename:'bundle.js',//出口打包文件名

              path:path.resolve(__dirname,'dist')//打包到的目录

            },

    module:{

            rules:[

                     {

                      test:/\.css$/,

                      use:

                        ['style-loader','css-loader ,' postcss-loader']

                       },

                      {

                      test:/\.scss$/,

                      use:

                       ['style-loader', 

                     { loader:'css-loader',

                      options:{

                             importLoaders:2//对于css样式文件中还引入样式文件采用的方式还是从下往上 'postcss-loader','sass-loader','css-loader','style-loader'

    ,若不加此项,对于样式文件中的引入文件直接走css-loader,style-loader忽略掉'postcss-loader'和'sass-loader '                  }                   

                    },

                     'sass-loader'  ,     

                    'postcss-loader']

                       },

                    {

                   test:/\.less$/,

                   use:[  'style-loader',                                                                    {loader:css-loader' ,

                           options:{

                                   importLoaders:2

                                             }

                                     },                                                                     'less-loader',

                   'postcss-loader'

                        ]

             }

    }

    3.在和webpack.config.js平级处新建一个postcss.config.js文件

    同时 npm install  autoprefixer -D

    module exports={

          plugin:[ require('autoprefixer')]

    }

    相关文章

      网友评论

          本文标题:5.Loader打包css文件增加前缀

          本文链接:https://www.haomeiwen.com/subject/jkwwvqtx.html