样式

本文介绍在 Umi 项目中使用样式的各种方式。

使用 CSS 样式

你可以在 Umi 项目中使用 .css 文件声明各种样式，然后在 .js 文件中引入即可生效。

例如，在 src/pages/index.css 文件按照以下代码声明 .title 类的样式为红色：

css

.title {
  color: red;
}

然后在 src/pages/index.tsx 文件中引入即可生效。

// src/pages/index.tsx

import "./index.css";

export default function () {
  return <div className="title">Hello World</div>;
}

注意

这种情况的引入会造成 css 污染.他会在会在整个 Umi 项目中生效，即无论你从哪个 .js 文件引入，他声明的样式可以在任何页面和组件中使用。

cssModules

在 js 文件中引入样式时，如果赋予他一个变量名，就可以将样式以 CSS Module 的形式引入。

// src/pages/index.tsx

import styles from "./index.css";

export default function () {
  return <div className={styles.title}>Hello World</div>;
}

上面的示例中，index.css 文件中声明的样式不会对全局样式造成影响，只会对从 styles 变量中使用的样式生效

使用 CSS 预处理器

Umi 默认支持 LESS (推荐)，SASS 和 SCSS 样式的导入，你可以直接按照引入 CSS 文件的方式引入并使用这些由 CSS 预处理器处理的样式。

安装

bash


在 Umi 中使用 SASS (SCSS) 需要额外安装预处理依赖 如: npm add -D sass

引用

// src/pages/index.tsx

import "./index.less";
import "./index.sass";
import "./index.scss";

export default function () {
  return <div className="title">Hello World</div>;
}

同时也支持使用 CSS Modules 的方式引入这些由 CSS 预处理器处理的样式。

// src/pages/index.tsx

import lessStyles from "./index.less";
import sassStyles from "./index.sass";
import scssStyles from "./index.scss";

export default function () {
  return (
    <div className={lessStyles.title}>
      Hello World
      <p className={sassStyles.blue}>I am blue</p>
      <p className={scssStyles.red}>I am red</p>
    </div>
  );
}

Umi 也同时提供了对 .styl 和 .stylus 文件的内置支持。使用前必须安装 stylus 相应的预处理器依赖，其他用法用上面的例子

# .styl and .stylus
npm add -D stylus

使用 UnoCSS

安装

bash


1. 安装 plugin-unocss

2. 安装 unocss 及 @unocss/cli

代码

pnpm i unocss @unocss/cli

在 Umi 中设置启用插件

// .umirc.ts

export default {
  plugins: [require.resolve("@umijs/plugins/dist/unocss")],
  unocss: {
    // 检测 className 的文件范围，若项目不包含 src 目录，可使用 `pages/**/*.tsx`
    watch: ["src/**/*.tsx"],
  },
};

unocss.config.ts 配置文件

创建在项目目录下加入 unocss.config.ts

并加入项目需要的 UnoCSS Presets

// unocss.config.ts

import { defineConfig, presetAttributify, presetUno } from "unocss";

export function createConfig({ strict = true, dev = true } = {}) {
  return defineConfig({
    envMode: dev ? "dev" : "build",
    presets: [presetAttributify({ strict }), presetUno()],
  });
}

export default createConfig();

使用

启动项目进行开发，插件会监听设置文件中的 unocss.watch 字段，动态生成样式文件并自动套用

样式 ​

使用 CSS 样式 ​

cssModules ​

使用 CSS 预处理器 ​

安装 ​

引用 ​

使用 UnoCSS ​