postcss处理css

原文链接：https://www.jianshu.com/p/4c8e0d869a19

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

加载 postcss-loader

cnpm i -D postcss-loader

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

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一样的套路。

// 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配置里

// 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

当在postCss 里使用 cssnao 插件的时候，它里面有很多默认额配置的，如果直接使用默认额配置，会有一些坑，搞的你怀疑人生！让我印象深刻的是帧动画 @keyframes ，居然把动画名字压缩到一个字母，搞的很多动画的名称因为是一个字母就全部重命了，动画效果全都牛头不对马嘴，烂七八糟的。一遍又一遍额检查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/

cssnao里有一个配置

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

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

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 被改变


    })
];

Previouswebapck配置 Nextwebpack-dev-server

Last updated 5 years ago