PostCSS

作者: Lee_Han_ | 来源:发表于2020-12-22 09:00 被阅读0次

    PostCSS -- 中文

    • postCSS本身是一个功能比较单一的工具。它提供了一种方式用javaScript代码来处理css。利用postcss可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。

    如何使用postCSS

    • 安装node环境
    • 安装postcss脚手架
    npm install postcss -g
    
    • -o -w命令
        -o : 编译文件到**路径下
        -w : 热编译
    
        postcss src/demo.css -o dist/demo.css -w
    
    • js依赖
        在跟目录下新建 postcss.config.js
    

    使用postcss插件 Postcss插件库

    -初始化npm依赖,生成package.json文件

        npm init
    
    • 安装 autoprefixer (自动添加浏览器前缀)
        npm i autoprefixer
    
    • 在postcss.config.js中使用autoprefixer
        const autoprefixer = require('autoprefixer')
    
        module.exports = {
            plugins : [
                autoprefixer({
                    browsers : [' > 0%']
                })
            ]
        }
    
    • 安装postcss-import (多个css文件进行合并)
        npm i postcss-import
    
    • 在postcss.config.js中使用postcss-import
        const cssImport = require('postcss-import')
        module.exports = {
            plugins : [
                cssImport
            ]
        }
    
    • 安装cssnano (对css进行压缩处理)
        npm i cssnano
    
    • 在postcss.config.js中使用cssnano
        const cssnano = require('cssnano')
        module.exports = {
            plugins : [
                cssnano
            ]
        }
    

    -安装postcss-cssnext (处理css高级语法)

        npm i postcss-cssnext
    
    • 在postcss.config.js中使用cssnano
        const cssnext = require('cssnext')
        module.exports = {
            plugins : [
                cssnext
            ]
        }
    

    其他插件引入方式相似,在官网查看文档,可以进行其他设置。

    相关文章

      网友评论

          本文标题:PostCSS

          本文链接:https://www.haomeiwen.com/subject/gbmjnktx.html