样式
本文介绍在 Umi 项目中使用样式的各种方式。
使用 CSS 样式
你可以在 Umi 项目中使用 .css
文件声明各种样式,然后在 .js
文件中引入即可生效。
例如,在 src/pages/index.css
文件按照以下代码声明 .title
类的样式为红色:
.title {color: red;}
然后在 src/pages/index.tsx
文件中引入即可生效。
// src/pages/index.tsximport './index.css';export default function () {return <div className="title">Hello World</div>;}
按照此种引入方式的样式会在整个 Umi 项目中生效,即无论你从哪个 .js
文件引入,他声明的样式可以在任何页面和组件中使用。如果你想要避免这种情况,可以使用 CSS Modules 的功能来限制样式的作用域。
使用 CSS Modules
在 js
文件中引入样式时,如果赋予他一个变量名,就可以将样式以 CSS Module 的形式引入。
// src/pages/index.tsximport 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 预处理器处理的样式。
💡
在 Umi 中使用 SASS (SCSS) 需要额外安装预处理依赖 如: npm add -D sass
// src/pages/index.tsximport './index.less';import './index.sass';import './index.scss';export default function () {return <div className="title">Hello World</div>;}
同样也支持 CSS Module 的用法:
// src/pages/index.tsximport 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 .stylusnpm add -D stylus
进阶设置
如果你需要使用除了常见的 LESS, SASS 或 SCSS 以外的其他样式预处理器,你可以透过 Umi 插件提供的 chainWebpack 接口来加入自己需要的 Loader。
使用 Tailwindcss
Umi 提供了内置的 Tailwindcss 插件,并且可以直接方便地使用 微生成器 来启用。
使用 UnoCSS
与 Tailwindcss 相同,Umi 也提供了内置的 UnoCSS 插件,可以按照相同方式开启。
- 安装
plugin-unocss
- 安装
unocss
及@unocss/cli
pnpm i unocss @unocss/cli
- 在 Umi 设置中启用插件,并声明会用到
unocss
的文件目录
// .umirc.tsexport default {plugins: [require.resolve('@umijs/plugins/dist/unocss')],unocss: {// 检测 className 的文件范围,若项目不包含 src 目录,可使用 `pages/**/*.tsx`watch: ['src/**/*.tsx']},};
- 在项目目录下加入
unocss.config.ts
配置文件,并加入项目需要的 UnoCSS Presets
// unocss.config.tsimport {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
字段,动态生成样式文件并自动套用