简介
前几篇文章,我们详细的讨论了一些Vite中关于css的配置。学了vite中css的几个配置项:
- preprocessorOptions配置-参考文章:Vite中预处理器(如less)的配置
- modules配置-参考文章:vite中如何更优雅的使用css
- vite中静态资源(css、img、svg等)的加载机制及其相关配
- devSourcemap配置-参考文章 Vite中如何使用css的源文件映射
通过这几篇文章,我们可以在vite中配置这样css
export default defineConfig({ css: { // css模块化配置项 modules:{ // .... } // 预处理器配置项 preprocessorOptions: { less: { math: "always", } }, devSourcemap:true } })
经常写css,我们都知道css在不同的浏览器兼容性是不同的。比如,有些特殊样式在不同浏览器前需要加上特殊前缀进行兼容:
// 只有chrome和safari支持,且需要添加webkit前缀 -webkit-margin-before -webkit-margin-after
我们可以在这个网站来测试不同css的兼容性
https://autoprefixer.github.io/
为了实现不同浏览器的兼容,我们最好的方式就是将所有css前缀补齐。但是,这样太浪费时间了!还好,postcss可以帮助我们一次性解决这些问题!
什么是postcss
postcss官网:https://www.postcss.com.cn/
postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具,postcss自身没有什么功能,只是一个平台,可以下载各种插件,从而实现一些功能!
- Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自动为 CSS 规则添加前缀。
- PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法,
- CSS 模块 能让你你永远不用担心命名太大众化而造成冲突,只要用最有意义的名字就行了。
注:PostCSS Preset Env 实际预设了很多好用的css插件,完全可以替代autoprefixer使用。
postcss可以通过在根目录创建postcss.config.js来进行配置,如:
const postcssPresetEnv = require("postcss-preset-env"); module.exports = { plugins: [postcssPresetEnv(/* pluginOptions */)] }
Vite中配置postcss
postcss在vite中的两种配置方式
- 项目根目录创建postcss.config.js文件
- 在vite.config.js内的css.postcss属性内直接配置
import { defineConfig } from "vite"; export default defineConfig({ css: { postcss:{ // 一些配置 } } });
两种配置方法一致,我们以第二种为主
postcss配置前后代码的异同
未配置postcss时
import { defineConfig } from "vite"; export default defineConfig({ css: { postcss:{} } });
首先,我们创建一个test.css文件并写入基础css
.postcss-test { height: 30px; background: blueviolet; user-select: none; }
然后再main.js内引入文件
import "./test.css"; const div = document.createElement("div") document.body.appendChild(div) div.className = "postcss-test" div.innerText ="别看我只是一只羊"
使用vite运行html,可以看到css和我们写的内容是一致的。
配置postcss时
我们主要使用postcss-preset-env插件,这个插件支持css变量和一些未来css语法以及自动补全(autoprefixer)
安装
npm i postcss-preset-env -D
配置
import { defineConfig } from "vite"; const postcssPresetEnv = require("postcss-preset-env") export default defineConfig({ css: { postcss:{ plugins:[postcssPresetEnv()] } } });
重启vite服务,可以发现,postcss-preset-env的css前缀补全已经生效了。