0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

京东云 来源:jf_75140285 2024-10-25 17:25 次阅读

作者:京东物流 刘微微

背景

好的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.tsx
import 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.ts
import 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.tsx
import { devDependencies } from "../../../package.json";

export function Header() {
  return (
    
< h1 className="font-bold text-2xl mb-2" > vite version: {devDependencies.vite} < /h1 >
); }

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
< /button >

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

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

//windi.config.ts
import { defineConfig } from "vite-plugin-windicss";

export default defineConfig({
  attributify: true,
  shortcuts: {
    "flex-c": "flex justify-center items-center",
  }
});

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


< !-- 等同于下面这段 -- >
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 文件
    +关注

    关注

    1

    文章

    566

    浏览量

    24737
  • CSS
    CSS
    +关注

    关注

    0

    文章

    109

    浏览量

    14372
  • 全局变量
    +关注

    关注

    1

    文章

    28

    浏览量

    8967
收藏 人收藏

    评论

    相关推荐

    形式方法的工程化

    形式化工程方法,是以软件形式方法理论为基础,以系统工程方法引导工业界工程人员构建高质量的软件模型,用以引导后续的代码编写和相关测试分析
    的头像 发表于 03-24 11:01 1481次阅读
    形式<b class='flag-5'>化</b>方法的<b class='flag-5'>工程化</b>

    [原创]逐渐智能现代化公安装备

    各个不同开展实际需要,提出了很多加强公安装备的方案,通过科学的概念,科技的手段来提高公安的办案能力。也使公安的装备逐渐智能现代化。   坚持公安装备现代化建设不动摇  早在上世纪80年代
    发表于 12-26 12:21

    基于RFID的现代化奶牛场管理应用

    0 引言 信息与自动现代管理技术在畜牧业发展的地位越来越重要,基于无线射频原理的奶牛自动识别系统,是现代化奶牛场管理 不可或缺的一部
    发表于 07-17 08:31

    怎么强化现代化IC的设计环境?

    数字设计及验证技术演进的概观现代化IC设计环境必须强化的方法
    发表于 04-09 06:17

    在医院现代化建设中部署无线局域网是否安全?

    无线局域网技术在医院现代化建设中有哪些作用?国内外无线局域网在医院应用的安全性研究是什么?
    发表于 05-17 06:56

    嵌入式系统工程化设计的相关资料分享

    了行业的飞速发展,可以说这个行业在风口上。但是,也发现我们的行业的不足,基础严重依赖国外,企业设计能力参差不齐,从业人员培训费时费力,导致产品可靠性低下,项目遭受重大损失。解决这一问题,需要提升我国嵌入式计算机工程化设计能力。什么是工程化首先什么是
    发表于 11-09 06:37

    求一种现代化网络的完全响应式设计方案

    现代化的网络可以完全响应,并且每天都有更多的设计师意识到这一点。 但是,在响应式设计方面存在一个艰巨的挑战: 嵌入式内容 。从YouTube到Vimeo的每个视频网站都具有固定为特定大小的默认嵌入
    发表于 12-23 08:04

    监控系统控制软件的工程化设计与实现

    主要探讨微机监控系统控制软件的工程化设计方法,介绍了模块程序设计和结构程序设计的基本原理,具体分析了在电锅炉微机控制系统,采用模块
    发表于 03-18 10:33 21次下载

    CSS工程化实践成果分析

    CSS技术的演进 CSS是Web开发不可或缺的一部分,在前端工程化不断进步的今天,一方面CSS特性随着规范的升级越来越丰富,另一方面,
    发表于 09-27 15:10 0次下载

    硬件工程都应该掌握防反接电路,你都Get到了吗?

    硬件工程都应该掌握的防反接电路,你都Get到了吗?
    的头像 发表于 02-03 15:05 4559次阅读

    专业的人士都应该且能够记住这二十个基本模拟电路

    初级层次是熟练记住这二十个电路,清楚这二十个电路的作用。只要是电子爱好者,只要是学习自动、电子等电控类专业的人士都应该且能够记住这二十个基本模拟电路。
    的头像 发表于 11-30 10:09 6313次阅读

    基于工程化参数优化的遥测伺服系统

    基于工程化参数优化的遥测伺服系统
    发表于 06-30 15:57 6次下载

    存储体系结构的现代化

    电子发烧友网站提供《存储体系结构的现代化.pdf》资料免费下载
    发表于 08-30 16:58 0次下载
    存储体系结构的<b class='flag-5'>现代化</b>

    喜报丨软通动力应用现代化平台工程产品及服务解决方案荣获“2023年应用现代化典型案例”称号

    在数字经济时代,应用现代化正在成为一个共识。 近日,中国软件行业协会首届“应用现代化产业实践优秀案例”评选结果揭晓, 软通动力应用现代化研究中心打造的应用现代化平台
    的头像 发表于 11-13 19:30 734次阅读
    喜报丨软通动力应用<b class='flag-5'>现代化</b>平台<b class='flag-5'>工程</b>产品及服务解决<b class='flag-5'>方案</b>荣获“2023年应用<b class='flag-5'>现代化</b>典型案例”称号

    软通动力应用现代化平台工程产品及服务解决方案荣获“2023年应用现代化典型案例”称号

    的应用现代化平台工程产品及服务解决方案荣获“2023年应用现代化典型案例”称号。该评选旨在加快推动应用现代化发展与推广应用,形成行业应用带动
    的头像 发表于 11-14 16:50 637次阅读
    软通动力应用<b class='flag-5'>现代化</b>平台<b class='flag-5'>工程</b>产品及服务解决<b class='flag-5'>方案</b>荣获“2023年应用<b class='flag-5'>现代化</b>典型案例”称号