【Vite】对 CSS 处理

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 的作用步骤：

1. 将 .css 文件中的类名按某种规则进行替换。eg: footer → _footer_h08ai_1
2. 创建映射对象，存储着类名被替换前后的映射 { footer: "_footer_h08ai_1" }
3. 创建 style 标签，将替换类名后的 CSS 样式复制到里面
4. 将 style 标签插入 index.html 的 head 标签中
5. 将 XXX.module.css 的内容替换为 Js 脚本
6. 将创建的映射对象在脚本中进行默认导出

构建 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：

1. 安装依赖 yarn add postcss postcss-cli -D
postcss-cli提供命令； postcss编译代码
2. 安装预设 yarn add postcss-preset-env -D
   预设能帮你把编译所需的一些基本插件安装好，就不需要自己一个个安装啦
3. 编写 PostCSS 配置文件

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
    plugins: [postcssPresetEnv()],
};

4. 编写 example.css 文件
5. 执行脚本 编译文件：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 全局变量
为了解决这个问题，可以进行如下配置：

1. 将所有的 CSS 全局变量都编写到一个 .css 文件中
2. 配置 postcss.config.js 读取并存储全局变量

const postcssPresetEnv = require('postcss-preset-env');
const path = require('path');

module.exports = {
    plugins: [    
        postcssPresetEnv({
            // 读取并存储指定文件中配置的 CSS 全局变量
            importFrom: path.resolve(__dirname, './globalVariable.css'),
        }),
    ],
};