Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件
Vite 解析 CSS 文件的过程:
① 使用 fs 模块读取 .css 文件的内容
② 创建一个 style 标签,将 .css 文件的内容 copy 到 style 标签内
③ 将 style 标签插入到 index.html 的 head 标签中
④ 将该 .css 文件的内容替换为 Js 脚本,以便于 CSS 模块化 & 热更新
CSS 模块化 (CSS Module)
在协同开发时,可能会出现相同的类名,该类名对应的样式就有可能被覆盖
import './componentA.css';
const div = document.createElement('div');
document.body.appendChild(div);
div.className = 'footer';
import './componentB.css';
const div = document.createElement('div');
document.body.appendChild(div);
div.className = 'footer';
.footer {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.footer {
width: 100px;
height: 100px;
background-color: rgb(127, 197, 255);
}
import './componentA';
import './componentB';
yarn dev
启动服务器,可以看见两个 div 都是同一个颜色的,这就是因为相同类名之间发生样式覆盖了。
使用 CSS 模块化可以解决这个问题:
.footer {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.footer {
width: 100px;
height: 100px;
background-color: rgb(127, 197, 255);
}
import componentACss from './componentA.module.css';
const div = document.createElement('div');
document.body.appendChild(div);
div.className = componentACss.footer;
import componentBCss from './componentB.module.css';
const div = document.createElement('div');
document.body.appendChild(div);
div.className = componentBCss.footer;
yarn dev
启动服务器,就可以看见两个 div 的颜色不一样啦
启动 CSS Module 需要将 .css 后缀改为 .module.css,这是一个约定
CSS Module 的作用步骤:
- 将 .css 文件中的类名按某种规则进行替换。eg:
footer
→_footer_h08ai_1
- 创建映射对象,存储着类名被替换前后的映射
{ footer: "_footer_h08ai_1" }
- 创建 style 标签,将替换类名后的 CSS 样式复制到里面
- 将 style 标签插入 index.html 的 head 标签中
- 将 XXX.module.css 的内容替换为 Js 脚本
- 将创建的映射对象在脚本中进行默认导出
构建 CSS 的配置项
import { defineConfig } from 'vite';
export default defineConfig({
css: {}, // 配置 CSS 的构建方式
});
preprocessorOptions
配置 CSS 预处理器
import { defineConfig } from 'vite';
export default defineConfig({
css: {
// 配置 CSS 预处理器
preprocessorOptions: {
less: {},
sass: {},
},
},
});
preprocessorOptions.less
less: {
math: 'always', // 配置什么时候执行数学运算
// 全局变量
globalVars: {
mainColor: 'blue',
},
},
preprocessorOptions.sass
scss: {
// 在每个 scss 文件的开头添加一些额外的数据, 通常用来导入一些全局的 scss 变量或样式文件
additionalData: '@import "@/styles/variable.scss";',
},
devSourcemap
是否在开发模式下生成 CSS 的 sourcemap,这样可以在浏览器的开发者工具中查看你的原始的 CSS 代码
import { defineConfig } from 'vite';
export default defineConfig({
css: {
devSourcemap: true, // 默认为 false
},
});
modules
配置 CSS 模块
import { defineConfig } from 'vite';
export default defineConfig({
css: {
// 配置 CSS 模块
modules: {},
},
});
modules.localsConvention
:规范 CSS Module 中类名的书写格式
'dashesOnly'
将映射对象中的类名都转换成中划线连接格式 (默认)'dashes'
将映射对象中的类名都转换成中划线连接格式,且保留其小驼峰格式'camelCaseOnly'
将映射对象中的类名都转换成小驼峰格式'camelCase'
将映射对象中的类名都转换成小驼峰格式,且保留其中划线连接格式
import { defineConfig } from 'vite';
export default defineConfig({
css: {
modules: {
localsConvention: 'dashesOnly',
},
},
});
modules.generateScopedName
:CSS Module 映射对象中 value 的命名方式
generateScopedName: '[name]-[contenthash:5]',
postcss
配置 PostCSS 的选项
import { defineConfig } from 'vite';
import postcssPresetEnv from 'postcss-preset-env';
export default defineConfig({
css: {
postcss: {
plugins: [postcssPresetEnv()], // 使用预设
// 需要先安装预设: `yarn add postcss-preset-env -D`
},
},
});
也可以使用 postcss.config.js 配置 postcss,postcss.config.js 的优先级会比 vite.config.js 的 css.postcss 低
PostCSS
PostCSS 是一种 CSS 处理工具,它可以让你使用一些高级的 CSS 特性,或者使用一些插件来扩展或优化你的 CSS 代码。
编译过程:
① 语法降级:用较低级的 CSS 语法替换高级 CSS 语法
② 前缀补全:部分浏览器能支持高级 CSS 语法,但需要添加指定前缀 (eg: --webkit)
使用 PostCSS:
- 安装依赖
yarn add postcss postcss-cli -D
postcss-cli
提供命令;postcss
编译代码 - 安装预设
yarn add postcss-preset-env -D
预设能帮你把编译所需的一些基本插件安装好,就不需要自己一个个安装啦 - 编写 PostCSS 配置文件
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
plugins: [postcssPresetEnv()],
};
- 编写 example.css 文件
- 执行脚本 编译文件:
npx postcss example.css -o result.css
处理 CSS 全局变量:
PostCSS 会一个个地对 .css 文件进行编译。假设有如下 .css 文件:
:root {
--main-color: red;
}
div {
background: var(--main-color);
}
会被编译成:
div {
background: red;
background: var(--main-color);
}
这会导致一个问题:在当前 .css 文件无法使用其他 .css 文件定义的 CSS 全局变量
为了解决这个问题,可以进行如下配置:
- 将所有的 CSS 全局变量都编写到一个 .css 文件中
- 配置 postcss.config.js 读取并存储全局变量
const postcssPresetEnv = require('postcss-preset-env');
const path = require('path');
module.exports = {
plugins: [
postcssPresetEnv({
// 读取并存储指定文件中配置的 CSS 全局变量
importFrom: path.resolve(__dirname, './globalVariable.css'),
}),
],
};