# postcss处理css

**原文链接：**[**https://www.jianshu.com/p/4c8e0d869a19**](https://www.jianshu.com/p/4c8e0d869a19)

postcss是处理css,它又包含了很多对css的插件，可以查看链接上的。

* 加载 postcss-loader 

```javascript
cnpm i -D postcss-loader
```

* postcss里常用的插件，压缩css :cssnano ,自动加前缀： autoprefixer,加前缀的规则是根据can i use 的标准，现在的 浏览器都在进一步标准化，现在大部分前缀都不需要了，以后也肯定会都不需要。每个插件都有配置参数。

```javascript
cnpm i -D cssnano auotprefixer
```

**配置postcss可以在单独的postcss.config.js，也可以在webpack里的配置文件webpack.config.js直接配置.postcss-loader的使用在style-loader、 css-loader之后，但是在其他loader之前，要是有sass-loader,就得在sass-loader之前。**

* 单独配置默认读取postcss.config.js 文件，不过也可以自定义文件名，然后配置路径，跟webpack一样的套路。

```javascript
// postcss.config.js 

let autoprefixer = require("autoprefixer");
let cssnano = require("cssnano");
moudle.exports={
    ident: 'postcss',
    plugins:[
        autoprefixer({
            browsers: [
            '>1%',
            'last 4 versions',
                 'Firefox ESR',
            'not ie < 9',
            ],

        }),
        cssnano({
            presets:default,

        }),
    ]
}

//也可以像webpack那样导出一个函数，接收参数，这个参数在node 运行的时候会传过来，是个对象，
// 里面包括很多属性，我们只需要用到file,options,env足够。

//webpack.config.js ,这里只简写出rules部分，具体参照下面的配置
rules:[
    {
        test:/.scss$/,
        exclude:/node_modules/,
        use:extractCss.extract({
            fallback:"style-loader",
            use:[
                {
                    loader:"css-loader",
                    options:{
                        module:true
                    }
                },
                {
                loader:"postcss-loader", // 注意位置在 sass-loader之前
                },
                {
                loader:"sass-loder",
                }
            ]
        })
    }

]
```

* 直接在webpack.config.js配置，就是把上面的文件直接写在每个loader的options配置里&#x20;

```javascript
// webpack.config.js

const path= require("path");

// 分离css
let  extractCssPlugin = require("extract-text-webpack-plugin");
let  extractCss = new extractCssPlugin({
    filename:"css/[name].boundle.css",
    ignoreOrder:true,
});

let autoprefixer= require("autoprefixer");
let cssnano = require("cssnano");

module.exports = {
    entry:{
        main:"src/main.js"
    },
    output:{
        path:path.join(__dirname,"build"),
        filename:[name].boundle.js,
    }
    module:{

     rules:[
        {
             test:/.scss$/,
             exclude:/node_modules/,
             use:extractCss.extract({
                 fallback:"style-loader",
                 use:[
                     {
                         loader:"css-loader",
                         options:{
                             module:true
                         }
                     },
                     {
                         loader:"postcss-loader",
                         options:{
                             ident: 'postcss',
                             plugins:[
                                autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9',
                                ],

                                }),
                                cssnano({
                                presets:default,

                                }),
                            ] 
                         }
                     },
                     {
                         loader:"sass-loder",       
                     }
                 ]

             })
        }

     ]
    },
    plugins:[
        extractCss ,
    ]
}
```

## **特别注意  : 原文地址：**[**https://www.yukapril.com/2018/02/10/less-zindex.html**](https://www.yukapril.com/2018/02/10/less-zindex.html)

* 当在postCss 里使用 cssnao 插件的时候，它里面有很多默认额配置的，如果直接使用默认额配置，会有一些坑，搞的你怀疑人生！让我印象深刻的是帧动画 **@keyframes ，**&#x5C45;然把动画名字压缩到一个字母 ，搞的很多动画的名称因为是一个字母就全部重命了，动画效果全都牛头不对马嘴，烂七八糟的。一遍又一遍额检查css有没有写错,css的帧动画额语法是不是错了，搞的都怀疑我之前写的帧动画是不是错的了。后来又找webpack里sass-loader 的配置是不是少了啥，还开启了 modules :true ，把antd里css全整没了。css模块我倒是了解。我干脆把动画的css单独用css，不用scss了，动画名还是不对，应该不是sass-loader 的配置问题。后来又改变css引入的顺序问题，还是不行。找来以前的项目，以前的项目的css编译出来的动画名没问题的。我倒要看看编译出来的动画名是啥，关闭了css压缩，居然就好了。这下就有直接联系的问题在网上找答案了。之前总是在找sass 帧动画名称改变，找到的都不是。要是聪明的分析，早就应该发现是cssnao压缩的问题。直接看cssnao 这个插件的配置吧！

**地址：**[**http://cssnano.co/guides/optimisations/**](http://cssnano.co/guides/optimisations/)

cssnao里有一个配置

```javascript
cssnano({
   preset: ['default'],
   reduceIdents: false  // 高级配置
})
```

* 现在的webpack 都已经内置了cssnao ,要是不配置就用默认额配置，其中有很多的坑，他会把所有额z-index进行比较再输出z-index的值，也就是说输出的不是你以前设置的，具体额输出规则可以研究下，不过要是不这样做，可以在postCsss设置&#x20;

```javascript
const plugins = [
    autoprefixer({
                browsers: [
                    '>10%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9',
                ],

    }),
    cssnano({
             preset: ['default',{
                /*discardUnused:[
                    {fontFace:true},
                    {keyframes:false},
                    {namespace:false},
                    {counterStyle:false},
                ]*/
             }],
            reduceIdents: false,
            zindex:false //防止编译时z-index 被改变


    })
];
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sekin.gitbook.io/myjs/webpack/postcsschu-li-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.