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 的作用步骤:
- 将 .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'),
}),
],
};
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgehhaa
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01