入門webpack(八) 關於postcss

postcss

---

postcss是一個工具，它容許使用JS插件對樣式進行裝換，這裏所說的插件有不少，最經常使用的是Autoprefixer 。

這些插件能夠檢查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 編譯還沒有被瀏覽器普遍支持的先進的 CSS 語法，內聯圖片，以及其它不少優秀的功能。

postcss插件有不少，本文介紹三個插件,更多的插件能夠參考官方github

postcss github

• Autoprefixer: 加上瀏覽器前綴
• cssnano: 幫助壓縮css
• postcss-cssnext:使用將來的css語法，這個插件包擴了Autoprefixer

---

在webpack中使用postcss

安裝

npm install postcss postcss-loader  Autoprefixer css-nano postcss-cssnext --save-dev

在webpack中使用postcss須要在css-loader後，less或者sass等loader前。
在下面的實例中，咱們先用ExtractTextWebpackPlugin單獨打包css，而後使用postcss的插件給css天健vendor前綴。
配置

var path = require('path')

var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: {
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use:[
            {
              loader: 'css-loader'
              // options: {
              //   localIdentName: '[path][name]_[local]_[hash:base64:5]'
              // }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins:[
                  require('autoprefixer')(),
                  require('postcss-cssnext')()

                ] 
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextWebpackPlugin({
      filename: '[name].min.css',

    })
  ]
}

經過ident:'postcss'將插件autoprefixer關聯到postcss-loader.
咱們在css文件中添加這段樣式代碼

```
{  //autoprefixer
  transition: transform 1s
}
//將來的css  postcss-cssnext
:root {
  --mainColor: red
}
.box {
  background-color: var(--mainColor)
}
```

查看打包後的app.min.css文件能夠看到

.trans {
  transition: -webkit-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s
}
.box {
  background-color: red
}

這說明postcss經過插件支持添加了兼容性前綴，而且能夠使用那些還沒有被瀏覽器所支持的css語法，好比變量,calc()等。這裏注意的是在使用postcss-cssnext時就不要使用autoprefixer插件，由於postcss-cssnext包含了autoprefixer插件。

---

給插件指定須要兼容的瀏覽器版本或者型號

• 在package.json文件中，新建browserslist

"browserslist": {
      ">= 1%",
      "last 2 versions"
  }

• 項目根目錄下新建browserslistrc文件