CSS工程化

PostCSS与CSS模块化

最新推荐文章于 2024-06-26 12:45:00 发布

原创最新推荐文章于 2024-06-26 12:45:00 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍PostCSS的功能及其插件生态系统，包括autoprefixer、cssnano等，如何使用PostCSS处理CSS新特性、模块合并及代码压缩。同时，探讨了CSS模块化问题的解决方案，如Less、Sass预处理器及PostCSS插件的应用，并介绍了如何利用webpack处理CSS，实现类名冲突的解决。

1. PostCSS

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

2. PostCSS插件

import 模块合并
autoprefixer 自动加前缀
cssnano 压缩代码

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

module.exports = {
	plugins: [
		atImport,
		cssnext,
		precss,
		autoprefixer({
			browsers: ['Firefox > 1']
		}),
		cssnano
	]
};

cssnext 使用css新特性

:root{
	--mainColor: red;
	--dager-theme: {
		color: white;
		background-color: red;
	};
}
a{
	color: var(--mainColor);
}
.danger{
	@apply --danger-theme;
}