@ cypress- design/ css (简体中文)
我们使用一个通用的首个 CSS 框架: TailwindCSS 来设置每个组件. 在您的工程中安装, 以正确配置组件 .
为此,遵循以下两个步骤:
在您的依赖性中安装 CSS 软件包 :
yarn add -D @cypress-design/css
类型
设计系统采用三个品牌字体. 通过Google Fonts装入它们——CDN处理横跨Cypress产品的缓冲:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500;600;700&display=swap"
/>
此套件所暴露的 Tailwind 字体工具 :
| 类 | 字体 | 用于 |
|---|---|---|
font-brand-heading | 弹出 | 页面标题, 显示文本 |
font-brand | 机器人 | 机体复制, UI 标签 |
font-brand-mono | 单人机器人 | 代码、 符号、 单相距值 |
font-system | 系统搜索堆栈 | 后退/ 系统 UI |
font-system-mono | 系统单空间堆栈 | 倒置/ 系统 UI 单 |
font-mono | 系统单空间堆栈 | 方便用别名 font-system-mono |
对于使用此软件包的项目:
我们把所有导入到这个包中的任何文件的 cs 绑入一个 dist 文件夹中的文件.. index.css 这样,这个软件包的用户就可以导入这个软件包的 css 样式,并在他们的工程中使用.
在样式表中使用 cyColors
在制作这个软件包时,我们有一个脚本 generate-colors-css.ts 生成文件 colors.css 重新创建所有 cyColors 从 color-constants.ts 作为 cs 变量。 如果需要添加或更新颜色,则仅指对象 cyColors 内 color-constants.ts 需要更新。 然后,我们需要重建 一揽子,以便 colors.css 可以重新生成, 因此您应该运行 :
cd css && yarn build
要使用此软件包在项目中使用这些 css 变量:
在你身边 .css 文件添加 :
@import "@cypress-design/css/index.css";
在你身边 .scss 文件添加 :
@use "@cypress-design/css/index.css" as *
然后可以使用来自 colors.css 像这样:
border: 1px solid var(--cy-gray-800);
删除 Windi (如果安装)
如果安装了风格,请先解开:
- 删除用于风向的自定义导入
import 'virtual:windi.css' - 从 web 软件包或 vite 配置中删除插件
安装尾风
安装尾风: 跟随 尾风文件
最后更新尾风配置文件 .
最简单的方式
此配置的动词较少, 只允许您自定义扫描的文件 .
// tailwind.config.cjs
const { TailwindConfig } = require('@cypress-design/css')
module.exports = TailwindConfig([
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
])
明确的方式
如果你计划配置
// tailwind.config.cjs
const cypressCSS = require('@cypress-design/css')
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [cypressCSS.TailwindConfig()],
content: {
files: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
extract: ['vue', 'js', 'tsx'].reduce((acc, ext) => {
acc[ext] = cypressCSS.TailwindIconExtractor
return acc
}, {}),
},
}
安装 WindiCSS( 过期)
网络软件包
const { CyCSSWebpackPlugin } = require('@cypress-design/css')
module.exports = {
plugins: [
CyCSSWebpackPlugin({
scan: {
include: ['src/**/*.@(tsx|ts|js|vue)'],
},
}),
],
}
维特
import { defineConfig } from 'vite'
import { CyCSSVitePlugin } from '@cypress-design/css'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
CyCSSVitePlugin({
scan: {
include: ['/src/**/*.@(tsx|ts|js|vue)'],
},
}),
],
})
页:1: 将您的 html 页面和所有的反应和 vue 组件文件添加到
scan.include阵列. 这有助于WindiCSS确定在最终生成的CSS中包含哪个类.