Home >Web Front-end >JS Tutorial >Detailed explanation of how to configure postcss-loader using webpack2.0

Detailed explanation of how to configure postcss-loader using webpack2.0

巴扎黑
巴扎黑Original
2017-08-18 10:15:411314browse

This article mainly introduces the method of configuring postcss-loader in webpack2.0. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the use of webpack2.0 to configure postcssloader and shares it with everyone. The details are as follows:

Install postcss-loader


npm install --save-dev postcss-loader

Then configure webpack.config.js


{
 test:/\.css$/,
 use:[
  'style-loader','css-loader?importLoaders=1','postcss-loader' 
 ] 
}

One way is to configure postcss.config.js


module.exports = {
  plugins: [
    require('autoprefixer')({ /* ...options */ })
  ]
}

The second way is webpack. config.js uses LoaderOptionsPlugin


module.exports = {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function(){
          return [
            require("autoprefixer")({
              browsers: ['ie>=8','>1% in CN']
            })
          ]
        }
      }
    })
  ]
}

The above is the detailed content of Detailed explanation of how to configure postcss-loader using webpack2.0. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn