入门webpack(八) 关于postcss

时间 2020-06-15

标签入门 webpack 关于 postcss 繁體版

原文原文链接

postcss

postcss是一个工具，它容许使用JS插件对样式进行装换，这里所说的插件有不少，最经常使用的是Autoprefixer 。css

这些插件能够检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译还没有被浏览器普遍支持的先进的 CSS 语法，内联图片，以及其它不少优秀的功能。 webpack

postcss插件有不少，本文介绍三个插件,更多的插件能够参考官方githubgit

postcss githubgithub

Autoprefixer: 加上浏览器前缀
cssnano: 帮助压缩css
postcss-cssnext:使用将来的css语法，这个插件包扩了Autoprefixer

在`webpack`中使用`postcss`

安装web

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

在webpack中使用postcss须要在css-loader后，less或者sass等loader前。
在下面的实例中，咱们先用ExtractTextWebpackPlugin单独打包css，而后使用postcss的插件给css天健vendor前缀。
配置npm

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文件中添加这段样式代码json

```
{  //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插件。sass

给插件指定须要兼容的浏览器版本或者型号bash

在package.json文件中，新建browserslist

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

项目根目录下新建browserslistrc文件