postcss

最新推荐文章于 2025-08-23 16:39:24 发布

diaolanbeng0962

最新推荐文章于 2025-08-23 16:39:24 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/leaf930814/p/9023731.html

一、简介　

　　PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。

　　实际上，PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。

二、结合webpack使用

　　PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。如：

在webpack.config.js中

const postcssConfigDir = './config/postcss.config.js';
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },
            rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    postcss: [require(postcssConfigDir)]
                }
            }
        ]
    }
}

再创建postcss.config.js

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

三、官方网站

https://www.postcss.com.cn/

转载于:https://www.cnblogs.com/leaf930814/p/9023731.html