一、简介 

  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/

 

 

postcss的更多相关文章

  1. 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  2. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  3. 在 CSS 预编译器之后:PostCSS

    提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...

  4. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  5. [译]PostCSS介绍

    PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.c ...

  6. PostCss 从0开始

    PostCss 摘自 http://ju.outofmemory.cn/entry/215105 http://www.w3cplus.com/PostCSS/postcss-deep-dive-pr ...

  7. postcss使用

    准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...

  8. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  9. 更便捷的css处理方式-postcss

    更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...

  10. postcss的安装与使用

    我是经过公司另外一个同事推荐的这个 他是一个资深的大哥哥  我觉得我确实需要跟多的学习和成长 而且我觉得我应该听他的话 多学学新知识 最近一直在做适配的网站 会出现很多媒体查询 我发现用这个写媒体查询 ...

随机推荐

  1. 撸.NET Core的正确姿势

    特点 案例基于刚发布的.NET Core 2.1 只需一台Linux服务器搞定一切, 全程无需自己配置dotnet环境, 需要熟悉git docker基础知识可有可无, 过了下面几个步骤,你就已经入门 ...

  2. python 操作mysql数据库之模拟购物系统登录及购物

    python 操作mysql数据库之模拟购物系统登录及购物,功能包含普通用户.管理员登录,查看商品.购买商品.添加商品,用户充值等. mysql 数据库shop 表结构创建如下: create TAB ...

  3. JS学习笔记6_事件

    1.事件冒泡 由内而外的事件传播(从屏幕里飞出来一支箭的感觉) 2.事件捕获 由表及里的事件传播(力透纸背的感觉) 3.DOM事件流(DOM2级) 事件捕获阶段 -> 处于目标阶段 -> ...

  4. 探索基于.NET下实现一句话木马之ashx篇

    0x01 前言 在渗透测试的时候各种PHP版的一句话木马已经琳琅满目,而.NET平台下的一句话木马则百年不变,最常见的当属下面这句 笔者感觉有必要挖坑一下.NET平台里的一句话木马,经过一番摸索填坑终 ...

  5. TaskCreationOptions.LongRunning 运行比可用线程数更多的任务

    最近在学WebSocket,服务端需要监听多个WebSocket客户端发送的消息. 开始的解决方法是每个WebSocket客户端都添加一个线程进行监听,代码如下: /// <summary> ...

  6. win下wamp虚拟主机配置

    第一步:在http://www.wampserver.com/网站上下载Wampserver,可以根据计算机的版本(32位或者64位)下载对应的版本 第二步,傻瓜式安装(直接点击下一步,下一步就好). ...

  7. Swfit 里 Array(五)和 NSArray 转换

     只看 Swift Array 到 NSArray Array 里的源代码 extension Array { @inlinable public // @SPI(Foundation) func ...

  8. hdu5745--La Vie en rose (DP+bitset)

    好题,学到新姿势! 题意:给两个字符串 a 和 b ,b可以进行变换,规则是可以任意交换相邻两个字符的位置,但是不可以有交叉(例如3和4交换,5和6交换 互不影响,但是2和3,3和4就不可以).求a中 ...

  9. [转]Use HandleBars in Express

    http://fraserxu.me/posts/Using-Handlebarsjs-with-Expressjs/ 在Express项目中使用Handlebars模板引擎 31 Aug 2014 ...

  10. django views视图函数返回值 return redirect httpresponse总结

    django views视图函数返回值 return redirect  render httpresponse总结