CSS工程化简单介绍 PostCSS介绍与插件使用

最新推荐文章于 2025-05-15 13:00:57 发布

原创最新推荐文章于 2025-05-15 13:00:57 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

CSS&HTML 专栏收录该内容

14 篇文章

订阅专栏

css工程化在不同公司有不同做法，主要关注四个方面

组织：代码的组织，怎么划分模块，怎么更方便合作
优化：代码怎样写更好，团队合作中为什么要这么做
构建：代码的压缩、上线等等
维护

PostCSS介绍

知识

CSS->PostCSS解析转化->CSS

PostCSS解析转化阶段可以做的事: 模块化，加前缀，兼容性等等

PostCSS本身只有解析能力
各种神器特性全靠插件
目前至少有200多个插件

import 模块合并
autoprefixier自动加前缀
cssnano压缩代码
cssnext使用CSS新特性
precss变量、mixin、循环等

实战

安装

npm install postcss-cli

windows用户下载一个git bash
cd到我们安装了postcss-cli的目录下
目录下建src文件和build文件
解析源文件

./node_modules/.bin/postcss src/01-postcss.css

导出到目标文件

./node_modules/.bin/postcss src/01-postcss.css -o build/01-postcss.css

autoprefixer

postcss.config.js

const autoprefixer = require('autoprefixer');

module.exports = {
	plugins: [
	    autoprefixer({
	    	browsers:['last 2 versions']
	    })
	]
};

browsers:['last 2 versions']//适配最近两个版本浏览器
browsers:['>10%']//适配大于10%的浏览器
browsers:['firefox >30']//适配firefox大于30的版本
browsers:['since 2016']//适配2016年之后的浏览器

我们不用自己查CSS的浏览器适配, 借助postcss添加
Browser list
https://browserl.ist/
less是按这个网站的标准解释CSS的

import

npm install postcss-import
postcss.config.js

const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');

module.exports = {
	plugins: [
	    atImport,
	    autoprefixer({
	    	browsers:['last 2 versions']
	    })
	]
};

src文件夹下, 02-plugins-main.css的内容

@import "./02-plugins-module.css";

.box{
    box-shadow: 0 0 3px rgba(255,255,255, .3);
}

02-plugins-module.css的内容

*{
	padding: 0;
	margin: 0;
}

执行

./node_modules/.bin/postcss src/01-postcss.css -o build/02-plugins-module.css

build文件夹下02-plugins-module.css内解释结束后产生的内容

*{
	padding: 0;
	margin: 0;
}

.box{
    -webkit-box-shadow: 0 0 3px rgba(255,255,255, .3);
            box-shadow: 0 0 3px rgba(255,255,255, .3);
}

cssnano

postcss.config.js

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const atImport = require('postcss-import');

module.exports = {
	plugins: [
	    atImport,
	    autoprefixer({
	    	browsers:['last 2 versions']
	    }),
	    cssnano
	]
};

cssnano放在最后
src/02-plugins-module.css的内容

*{
	padding: 0;
	margin: 0;
}

body{
	margin: 10px 20px 10px 20px;
	font-size: 14px;
}

body{
	background-color: #ffffff; 
}

执行

*{padding:0;margin:0}body{margin:10px 20px;font-size:14px;background-color:#fff}.box{-webkit-box-shadow:0 0 3px hsla(0,0%,100%,.3);box-shadow:0 0 3px hsla(0,0%,100%,.3)}