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

京东云开发者
• 阅读 48

作者:京东物流 刘微微

背景

好的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 (
    <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.ts
import { 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>
点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
菜园前端 菜园前端
1年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Souleigh ✨ Souleigh ✨
3年前
只听说过CSS in JS,怎么还有JS in CSS?
CSSinJS是一种解决css问题想法的集合,而不是一个指定的库。从CSSinJS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
Wesley13 Wesley13
3年前
CSS3的基础知识学习(二)
前言:CSS主要是用来修饰标签的样式、使得网页更加美观,其实css的引用有三种方式,但主要是使用链接引用,意思就是我们写一个.css的文件,将样式修饰的控制代码写在这里面,这样控制起来方便快捷。对于CSS的学习,知识点中最重要的部分就是属性和选择器,其次还有页面布局和盒子模型,下面进行学习以及代码效果演示。一、CSS的三种引入
Wesley13 Wesley13
3年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Wesley13 Wesley13
3年前
JS和CSS加载(渲染)机制不同
一、结论CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
Stella981 Stella981
3年前
Amcharts插件实现柱状图+折线图+单个主题
1.需要引用封装好的amcharts.js文件和css样式表;2.在页面上创建一个div容器存放折线图;3.引用一个自定义主题js注意:     在页面的head部分我们需要添加amChartsJavaScript库文件的引用。由于V3amCharts库被拆分成了几个文件,为了节省几个kb空间—你需要添加amchart.js主文
凿壁偷光 凿壁偷光
1年前
SiteSucker增强版SiteSucker Pro for Mac
SiteSucker是Macos上一款专业网站下载工具,SiteSuckerPro是SiteSucker的增强版,在SiteSuckerMac版中输入网址就能离线下载一个网站里的所有内容,包括HTML、图片、CSS样式表、JS文件、Flash文件等。
liam liam
1年前
如何使用 Less:Less 教程,一步步带你入门
Less(LeanerStyleSheets的缩写)是一门向后兼容的CSS扩展语言。,它扩展了CSS(层叠样式表)的功能并提供了更灵活、更强大的样式定义和管理机制。通过使用Less,开发人员可以编写可维护、可重用的样式代码,并以简洁的语法实现复杂的样式效果