分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

PostCSS 基本用法

发布时间:2023-09-06 01:50责任编辑:傅花花关键词:CSS

1、postcss相关网站

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

https://www.ibm.com/developerworks/cn/web/1604-postcss-css/

2、介绍

PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。

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

Webpack 中使用 PostCSS 插件示例:

var path = require(‘path‘); module.exports = { context: path.join(__dirname, ‘app‘), entry: ‘./app‘, output: { ??path: path.join(__dirname, ‘dist‘), ??filename: ‘bundle.js‘ }, module: { ??loaders: [ ????{ ??????test: ??/\.css$/, ??????loader: "style-loader!css-loader!postcss-loader" ????} ??] }, postcss: function () { ??return [require(‘autoprefixer‘)]; }}

postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require(‘autoprefixer‘) 的作用是加载 Autoprefixer 插件。

3、总结

通过 PostCSS 强大的插件体系,可以对 CSS 进行各种不同的转换和处理,从而尽可能的把繁琐复杂的工作交由程序去处理,而把开发人员解放出来。

PostCSS 基本用法

原文地址:https://www.cnblogs.com/mengfangui/p/8932915.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved