写点什么

研发都应该了解的如何在 vite 中接入现代化 css 工程化方案

  • 2024-10-22
    北京
  • 本文字数:2032 字

    阅读完需:约 7 分钟

作者:京东物流 刘微微

背景

好的 css 工程化方案可以增强我们项目的可维护性、提高样式的复用性、进行自动化处理等,在提高页面加载速度和性能的同时,我们可以有更多的精力进行 js 逻辑的处理。

添加全局样式文件

使用场景: 有一个 scss/less 文件,此文件中定义了一些全局变量,需要在其他的样式文件中使用,此时需要将这些变量放在全局


// vite.config.ts// 全局 scss 文件的路径const variablePath = path.resolve("./src/variable.scss");
export default defineConfig({ // css 相关的配置 css: { preprocessorOptions: { scss: { // additionalData 的内容会在每个 scss 文件的开头自动注入 additionalData: `@import "${variablePath}";` } } }})
复制代码

CSS Modules

CSS Modules 在 Vite 也是一个开箱即用的能力,Vite 会对后缀带有.module 的样式文件自动应用 CSS Modules。接下来我们通过一个简单的例子来使用这个功能。


首先,将 Header 组件中的 index.scss 更名为 index.module.scss,然后稍微改动一下 index.tsx 的内容,如下:


// index.tsximport styles './index.module.scss';export function Header() {  return <p className={styles.header}>This is Header</p>};
复制代码

PostCSS 自动添加 css 兼容前缀

一般你可以通过 postcss.config.js 来进行 postcss 的配置,不过在 Vite 配置文件中已经提供了 PostCSS 的配置入口,我们可以直接在 Vite 配置文件中进行操作。


首先,我们来安装一个常用的 PostCSS 插件——autoprefixer:


pnpm i autoprefixer -D
复制代码


这个插件主要用来自动为不同的目标浏览器添加样式前缀,解决的是浏览器兼容性的问题。接下来让我们在 Vite 中接入这个插件:


// vite.config.ts 增加如下的配置
export default { css: { // 进行 PostCSS 配置 postcss: { plugins: [ autoprefixer({ // 指定目标浏览器 overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11'] }) ] } }}
复制代码

CSS 原子化框架

在目前的社区当中,CSS 原子化框架主要包括 Tailwind CSS 和 Windi CSS。Windi CSS 作为前者的替换方案,实现了按需生成 CSS 类名的功能,开发环境下的 CSS 产物体积大大减少,速度上比 Tailwind CSS v2 快 20~100 倍!当然,Tailwind CSS 在 v3 版本也引入 JIT(即时编译) 的功能,解决了开发环境下 CSS 产物体积庞大的问题,但这也是后来的事情了。接下来我们还是选择 Windi CSS 作为 CSS 原子化框架来接入到 Vite 中。


首先安装 windicss 及对应的 Vite 插件:


pnpm i windicss vite-plugin-windicss -D
复制代码


随后我们在配置文件中来使用它:


// vite.config.tsimport windi from "vite-plugin-windicss";
export default { plugins: [ // 省略其它插件 windi() ]}
复制代码


接着要注意在 src/main.tsx 中引入一个必需的 import 语句:


// main.tsx// 用来注入 Windi CSS 所需的样式,一定要加上!import "virtual:windi.css";
复制代码


这样我们就完成了 Windi CSS 在 Vite 中的接入,接下来我们在 Header 组件中来测试,组件代码修改如下:


// src/components/Header/index.tsximport { devDependencies } from "../../../package.json";
export function Header() { return ( <div className="p-20px text-center"> <h1 className="font-bold text-2xl mb-2"> vite version: {devDependencies.vite} </h1> </div> );}
复制代码

windicss 的 attributify 和 shortcuts

除了本身的原子化 CSS 能力,Windi CSS 还有一些非常好用的高级功能,在此我给大家推荐自己常用的两个能力: attributify 和 shortcuts。


要开启这两个功能,我们需要在项目根目录新建 windi.config.ts,配置如下:


import { defineConfig } from "vite-plugin-windicss";
export default defineConfig({ // 开启 attributify attributify: true,});
复制代码


首先我们来看看 attributify,翻译过来就是属性化,也就是说我们可以用 props 的方式去定义样式属性,如下所示:


<button   bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"  text="sm white"  font="mono light"  p="y-2 x-4"  border="2 rounded blue-200">  Button</button>
复制代码


这样的开发方式不仅可以省去了繁琐的 className 内容,而且还加强了语义化,代码更容易维护,可以说大大提升了开发体验。


shortcuts 用来封装一系列的原子化能力,尤其是一些常见的类名集合,我们在 windi.config.ts 来配置它:


//windi.config.tsimport { defineConfig } from "vite-plugin-windicss";
export default defineConfig({ attributify: true, shortcuts: { "flex-c": "flex justify-center items-center", }});
复制代码


比如这里封装了 flex-c 的类名,接下来我们可以在业务代码直接使用这个类名:


<div className="flex-c"></div><!-- 等同于下面这段 --><div className="flex justify-center items-center"></div>
复制代码


发布于: 刚刚阅读数: 5
用户头像

拥抱技术,与开发者携手创造未来! 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者,提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】,欢迎大家来玩

评论

发布
暂无评论
研发都应该了解的如何在vite中接入现代化css工程化方案_京东科技开发者_InfoQ写作社区