PostCSS
- PostCSS是一款使用JavaScript插件对CSS实现转换的工具
- PostCSS拥有非常强大的插件，典型的比如
autoprefixer、cssnext、css modules等。 - PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。
- PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。
Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.
$ vim vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcssImport from "postcss-import"
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
export default ({mode})=>{
//生成自定义用户配置
return defineConfig({
//样式表插件
css:{
postcss:{
plugins:[
postcssImport,
autoprefixer,
tailwindcss
]
}
}
})
}
PostCSS插件：嵌套CSS样式写法解决方案
| 插件 | 描述 |
|---|---|
| postcss-import | 支持@import写法 |
| postcss-url | 支持@url写法 |
| postcss-bem | 支持BEM元素规则命名 |
| postcss-nested | 支持类选择器嵌套写法，模拟SASS嵌套选择器写法。 |
| postcss-nesting | 支持符合W3C规范的嵌套类选择器写法 |
| postcss-simple-vars | 支持变量 |
| postcss-advanced-variables | 支持类似SASS自定义变量并引用，实现编写变量、条件、循环。 |
| postcss-preset-env | 支持变量运算 |
PostCSS插件：H5移动端屏幕适用性解决方案
| 插件 | 描述 |
|---|---|
| cssnano | 优化和压缩CSS，已包含autoprefixer插件。 |
| postcss-aspect-ratio-mini | 容器比匹配 |
| postcss-cssnext | 实现嵌套编程 |
| postcss-px-to-viewport | 将px转换为vw以适应各种屏幕 |
| postcss-write-svg | 1px细线的绘制 |
Import
PostCSS通过@import将样式表合并到一起，当需要通过@import将第三方类库导入到主样式表时，首先需要运行的是@import插件。
| 插件 | 描述 |
|---|---|
| postcss-import | 支持通过内联内容来转换@import规则 |
| postcss-partial-import | 让CSS文件支持@import语法，支持W3C的写法，也支持SASS写法。 |
postcss-import
- 源代码 https://github.com/postcss/postcss-import
安装插件
$ npm ls postcss-import
$ npm info postcss-import
$ npm i -D postcss-import@latest
postcss-partial-import
- NPM包 https://www.npmjs.com/package/postcss-partial-import
- 源代码 http://www.github.com/jonathantneal/postcss-partial-import
- 支持在CSS文件中使用Sugary
@import语法，包括glob-like和Sass-like行为。 - 允许将导入作为脚手架工作来生成
Autoprefixer
- Autoprefixer是一个根据
Can I Use解析CSS并为其添加浏览器厂商前缀的PostCSS插件 - Autoprefixer会使用基于当前浏览器支持的特性和属性为CSS添加前缀
查看项目下是否已经安装过Autoprefixer
$ npm ls autoprefixer version
使用NPM为Vue项目安装Autoprefixer
$ npm info autoprefixer versions
$ npm i -D autoprefixer@latest
在PostCSS配置文件post.config.js配置文件的插件属性中添加Autoprefixer
$ vim postcss.config.js
import autoprefixer from "autoprefixer"
export default {
plugins:[
autoprefixer
]
}
TaildwindCSS
官方网站：https://www.tailwindcss.cn/docs/plugins
- Tailwind CSS是一款实用为主效用优先的CSS框架
- TailwindCSS作为PostCSS插件存在，将基础的CSS拆分为原子级别。
- PostCSS提供Autoprefixer插件用于补全各种浏览器前缀，兼容性更好。
查看项目是否已经安装TailwindCSS
$ npm ls tailwindcss version
使用NPM安装TailwindCSS
$ npm info tailwindcss versions
$ npm i -D tailwindcss@latest
为PostCSS配置TailwindCSS插件
$ vim postcss.config.js
import postcssImport from "postcss-import"
import autoprefixer from "autoprefixer"
import tailwindcss from "tailwindcss"
export default {
plugins:[
postcssImport,
autoprefixer,
tailwindcss
]
}
配置TailwindCSS独立配置文件
$ vim tailwind.config.js
export default {
}
安装VSCode插件
- Tailwind CSS IntelliSense
- Tailwind Docs
创建全局应用的样式表，注意必须引入postcss-import插件以支持@import写法。
$ vim src/assets/css/main.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
项目主入口文件中引入全局样式表
$ vim src/main.js
import "@/assets/css/main.css"
安装TailwindCSS插件
TailwindCSS提供了可复用的第三方插件用于扩展Tailwind，插件会注册新的样式，让Tailwind使用JavaScript代替CSS注入用户的样式表。
$ npm i -D @tailwindcss/forms
$ npm i -D @tailwindcss/typography
$ npm i -D tailwindcss/aspect-ratio