Primer CSS 入门指南：从安装到实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00024/article/details/148392618

Primer CSS 入门指南：从安装到实战应用

css The CSS design system that powers GitHub 项目地址: https://gitcode.com/gh_mirrors/cs/css

什么是 Primer CSS

Primer CSS 是一套由 GitHub 设计团队开发的开源 CSS 框架，专为构建现代化、响应式的 Web 界面而设计。它提供了一套完整的样式解决方案，包括基础样式、工具类、组件和布局系统，特别适合需要与 GitHub 风格保持一致的项目。

安装 Primer CSS

通过 npm 安装（推荐方式）

对于现代前端项目，我们推荐使用 npm 进行安装：

npm install --save @primer/css

安装前的准备工作

检查 npm 版本：确保你的 npm 版本在 3.0 或以上
```
npm -v
```
如果版本过低，可以通过以下命令升级：
```
npm install npm@latest -g
```
初始化项目：如果你的项目还没有 package.json 文件，需要先初始化
```
npm init
```

文件结构解析

安装完成后，Primer CSS 的所有 SCSS 源文件将位于 node_modules/@primer/css 目录中。了解文件结构有助于更好地组织你的样式：

源码位于 src/ 目录
发布后，所有文件会被提升到包根目录
内部依赖通过相对路径引用

在项目中集成 Primer CSS

基本集成方式

创建一个主 SCSS 文件（通常命名为 index.scss），然后导入所需的 Primer CSS 模块：

@import '@primer/css/core/index.scss';  // 核心样式
@import './custom-styles.scss';        // 你的自定义样式

自定义变量覆盖

Primer CSS 使用 SCSS 变量，你可以轻松覆盖默认值：

// 先导入支持文件
@import '@primer/css/support/index.scss';

// 覆盖默认变量
$blue: #0000ff;
$font-size-h2: 2rem;

// 然后导入其他模块
@import '@primer/css/utilities/index.scss';

针对不同项目的配置

Jekyll 项目配置

对于使用 Jekyll 的静态网站，需要进行特殊配置：

确保 Jekyll 版本 ≥ 3.3.1
```
jekyll -v
```

在 _config.yml 中添加 Sass 配置：

sass:
  sass_dir: assets/css/
  load_paths:
    - node_modules/

解决可能的兼容性问题：
- 更新 Gemfile 使用 dart-sass
- 修改 _config.yml 指定 Sass 实现

静态网站直接使用

对于不需要构建过程的简单静态网站，可以直接使用预编译的 CSS：

自托管方式：
- 下载编译好的 CSS 文件
- 通过 <link> 标签引入

CDN 方式（不推荐用于生产环境）：

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />

最佳实践建议

按需导入：只导入你需要的模块，而不是整个框架，可以减少最终 CSS 文件大小
```
@import '@primer/css/buttons/index.scss';
@import '@primer/css/forms/index.scss';
```
组织自定义样式：
- 将覆盖变量放在单独文件
- 按功能模块组织自定义样式
构建优化：
- 设置 Sass 的 outputStyle 为 compressed
- 考虑使用 PostCSS 进行进一步优化