首页 前端知识 【Vite】对 CSS 处理

【Vite】对 CSS 处理

2024-06-18 22:06:48 前端知识 前端哥 49 142 我要收藏

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()],
};
  1. 编写 example.css 文件
  2. 执行脚本 编译文件: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'),
        }),
    ],
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12634.html
标签
postcss
评论
发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

npm install报错

2024-06-24 23:06:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!