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

巴扎黑
Release: 2017-08-18 10:15:41
Original
1316 people have browsed it

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
Copy after login

Then configure webpack.config.js


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

One way is to configure postcss.config.js


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

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']
            })
          ]
        }
      }
    })
  ]
}
Copy after login

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!

Related labels:
web
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template