default

postcss

更新时间:2024-04-24阅读整篇大约9分钟

安装postcss以及postcss-cli

cmd
pnpm install postcss postcss-cli -D

执行一下postcss，为什么要用npx，可以看一下npx

cmd
npx postcss -h

正常工作，下面让我们来关注一下各种插件

插件

postcss-import

在scss中我们可以使用@import来导入其他css模块的一些样式，在css中我们如何去实现相同的功能呢，这个插件就可以帮助我们实现这个效果，postcss-import 允许在 CSS 中使用类似于原生 CSS 导入规则的语法来导入其他 CSS 文件。与原生 CSS 中的导入规则不同，postcss-import 插件在构建过程中会将导入的 CSS 文件合并到一个单独的 CSS 文件中，而不是在运行时逐个下载和加载这些文件。

首先 安装这个库

dmc
pnpm install postcss-import -D

然后，我们创建两个css文件

scss
//index2.css
.index2 {
	margin: 10px;
}
 
//index.css
@import './index2.css';
.index {
	margin: 10px;
}

运行我们的script

cmd
npx postcss ./index.css --use postcss-import  -r

最后得到这样的结果，也就完成了将各个css模块导入到同一个模块中

scss
.index2 {
	margin: 10px;
}
.index {
	margin: 10px;
}

autoprefixer

这个插件用于自动给我们的样式增加各个浏览器的前缀，例如-webkit-，-moz-等，它会根据项目中的browserslist来生成最终的样式代码

可以在browserslist中设置指定的浏览器限制和类型,这个配置可以写在package.json 文件中，

json
"browserslist": [ 
    //直接写"defaults"和下面的效果一样的
    "> 0.5%",//全球使用率至少为 0.5% 的浏览器。
    "last 2 versions",//每个浏览器的最后 2 个版本，
    "Firefox ESR",//最新的Firefox 扩展支持版本.,
    "not dead"//在过去 24 个月内获得官方支持或更新的浏览器。
]

或者也可以单独写在根目录文件.browserslistrc中

.browserslistrc
> 0.5%
last 2 versions
Firefox ESR
not dead

然后我们来使用一下

scss
//index3.css
.index3 {
	margin: 10px;
}
//index2.css
.index2 {
	margin: 10px;
	box-sizing: border-box;
	user-select: none;
}
 
//index.css
@import './index2.css';
.index {
	margin: 10px;
}

最后的结果

scss
.index3 {
	margin: 10px;
}
.index2 {
	margin: 10px;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.index {
	margin: 10px;
}

postcss-nano(包名:cssnano)

这是一个用于css代码压缩的库,它可以让你的最终css代码尽可能的小

让我们使用一下

cmd
npx postcss ./index.css --use postcss-import autoprefixer cssnano  -r

最后的结果可以看到他将我们的代码尽可能地压缩到了最少的字符，减少了最后打包出来的文件大小

scss
.index3{margin:10px}.index2{box-sizing:border-box;margin:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;div{margin:12px}}.index{margin:10px}

postcss-preset-env

这个插件使我们能够在我们的代码中使用现代CSS的一些特性，例如嵌套和自定义媒体查询等等，它有一个stage选项，可以根据所需要的稳定性来确定要填充哪些 CSS 功能。

stage：

  • 0 稻草人阶段(任何人都可以提)

  • 1 提案阶段

  • 2 草案阶段,默认值

  • 3 候选阶段

  • 4 完成阶段

preset-env 插件默认包含autoprefixer插件，并且会将browsers选项自动传递给它。

让我们使用一下

scss
//index3.css
.index3 {
	margin: 10px;
}
 
//index2.css
@import './index3.css';
.index2 {
	margin: 10px;
	box-sizing: border-box;
	user-select: none;
	div {
		margin: 12px;
	}
}
//index.css
@import './index2.css';
.index {
	margin: 10px;
}

最后结果,看起来还会合并相同的规则

scss
.index2,
.index3 {
	margin: 10px;
}
.index2 {
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.index2 div {
	margin: 12px;
}
.index {
	margin: 10px;
}

postcss-mixins

这个用于支持混合，便于我们复用一些重复样式

让我们使用一下

scss
//index3.css
.index3 {
	margin: 10px;
}
@define-mixin test_mix {
	padding: 20px;
}
 
//index2.css
@import './index3.css';
.index2 {
	margin: 10px;
	box-sizing: border-box;
	user-select: none;
	div {
		@mixin test_mix;
		margin: 12px;
	}
}
 
//index.css
@import './index2.css';
.index {
	margin: 10px;
}
cmd
npx postcss ./index.css --use postcss-import autoprefixer cssnano postcss-preset-env  postcss-mixins -r

最后结果

scss
.index2,.index3{margin:10px}.index2{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none}.index2 div{margin:12px;padding:20px}.index{margin:10px}

postcss-normalize

它可以根据需要自动向 CSS 中添加标准化的样式，以确保在不同浏览器中获得一致的显示效果。

安装一下postcss-normalize

这里建议安装@8版本，因为最新版本有一个@csstools/normalize.css的问题，我去看git issues 发现需要改动部分源码，并且评论的方法中的变量名也对不上，改不了一点点，并且改源码这肯定是不行的。。。别人拉下来不可能也去改源码，经过测试发现@8版本可以正常运行

cmd
pnpm install postcss-normalize@8 -D

运行一下

npx postcss ./index.css --use postcss-import autoprefixer cssnano postcss-preset-env  postcss-mixins postcss-normalize -r

结果与我们不加入这个插件是一样的？难道这个库还需要一些额外的配置？

是的，还需要配置需要使用的css库，两种方法，第一种直接在css样式文件中导入css库,这种命令行也可以执行

scss
@import "normalize.css";//需要额外安装这个库
@import './index2.css';
.index {
	margin: 10px;
}

这种我试了一下，没有postcss-normalize依然可以使最后的文件存在标准化样式(那postcss-normalize的作用是啥？)

第二种，可以在配置文件中配置，具体可以看下面的配置文件。

配置文件

经过刚才的一系列插件介绍，我们不可能增加一个插件就在命令后面追加一个插件名，并且我们还需要可配置化，所以以采用配置文件的形式来使用一下

js
module.exports = {
	plugins: [
		require('postcss-import'),
		require('postcss-mixins'),
		require('autoprefixer'),
		require('postcss-preset-env')({ stage: 1 }),
		require('cssnano'),
		require('postcss-normalize')({
			forceImport: 'sanitize.css',//需要指定一个标准样式 也可也写成true
		}),
	],
};

然后更改一下我们的npm script

json
"postcss:style": "postcss ./index.css  -r"

使用这种方式来处理，似乎postcss-normalize的最新版本可以正常运行了，所以我又切回最新版本了

展示下最后的效果

scss
:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-bottom:.67em;margin-top:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-bottom:0;margin-top:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input[type=button i]){-webkit-appearance:button}:where(button,input[type=reset i]){-webkit-appearance:button}:where(button,input[type=submit i]){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input[type=button i])::-moz-focus-inner{border-style:none;padding:0}:where(button,input[type=color i])::-moz-focus-inner{border-style:none;padding:0}:where(button,input[type=reset i])::-moz-focus-inner{border-style:none;padding:0}:where(button,input[type=submit i])::-moz-focus-inner{border-style:none;padding:0}:where(button,input[type=button i])::-moz-focusring{outline:1px dotted ButtonText}:where(button,input[type=color i])::-moz-focusring{outline:1px dotted ButtonText}:where(button,input[type=reset i])::-moz-focusring{outline:1px dotted ButtonText}:where(button,input[type=submit i])::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}.index2,.index3{margin:10px}.index2{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none}.index2 div{margin:12px;padding:20px}.index{margin:10px}

在webpack中使用

js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//这个是让css以文件的形式输出，style-loader是让css以内联的形式插入到html文档中，为了好观察，不选style-loader。
module.exports = {
	mode: 'development', //配置工作模式
	entry: `./index.css`, //指定入口文件,之打包我们的css
	output: {
		//指定打包文件的目录
		path: path.resolve(__dirname, './code/dist'),
		filename: 'bundle.js',
		clean: true,
	},
	module: {
		rules: [
			{
				test: /\.css$/,'postcss-loader'即可，插件的使用放到
				use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],//这里直接写'postcss-loader'即可，具体配置放到postcss.config
			},
		],
	},
	
	plugins: [
		new MiniCssExtractPlugin({
			// 使用filename配置可以指定输出的css的文件名和文件位置
			filename: 'css/[name]_[hash:6].css',
		}),
	],
};

用style-loader打包之后的效果，可以看到是插入到style中的

image-20240425003403781

用mini-css-extract-plugin打包的结果，可以看到是采用外部链接的方式

image-20240425003457459

TODO postcss与sass以及less的关系以及webpack中如何同时使用sass和postcss