入门webpack(八) 关于postcss

最新推荐文章于 2024-08-30 09:02:01 发布

TyrionJ

最新推荐文章于 2024-08-30 09:02:01 发布

阅读量1.3k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/tyrionj/article/details/79322588

版权

webpack 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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文件