// [doc-seo]
{
    "Description": "探索 Lepton X SCSS 文件的结构，专为项目中的高效主题管理和样式优化而设计。"
}

Lepton X SCSS 文件

LeptonX 的 SCSS 文件结构分为不同的捆绑包。这样做的目的是在项目中排除不必要的样式（例如，在使用侧边菜单布局时排除顶部菜单层的样式），并且只在主题变更时重新加载相关文件。

捆绑包文件

源文件中包含捆绑包的文件夹名称不包含下划线。包含下划线的是捆绑包文件所使用的内部文件。

主题捆绑包文件: dim.scss、dark.scss、light.scss 位于 themes 目录下。

Bootstrap 捆绑包文件: dark/bootstrap-dark.scss、light/bootstrap-light.scss 和 dim/bootstrap-dim.scss 位于 frameworks/bootstrap 目录下。

布局捆绑包文件: side-menu/layout-bundle.scss 和 top-menu/layout-bundle.scss 位于 pro 目录下。

UI 特定捆绑包: Angular UI 捆绑包是 pro/libraries/ng-bundle.scss，Blazor UI 捆绑包是 pro/libraries/blazor-bundle.scss，MVC UI 捆绑包是 pro/libraries/js-bundle.scss。

ABP 捆绑包文件: ABP UI 元素的样式在 pro/abp/abp-bundle.scss 中。

字体捆绑包: pro/libraries/font-bundle.scss。

主题映射

主题映射在主题颜色文件中定义。文件位置如下：

深色主题: _colors/dark/colors.scss
浅色主题: _colors/light/colors.scss
昏暗主题: _colors/dim/colors.scss

以下是可能的属性列表：

border-color,
brand,
brand-text,
card-bg,
card-title-text-color,
container-active-text,
content-bg,
content-text,
danger,
dark
info,
light
logo,
logo-icon,
logo-reverse,
navbar-active-bg-color
navbar-active-text-color
navbar-color
navbar-text-color
primary,
radius
secondary,
shadow,
success,
text-white,
warning

主题构建器

build-theme 混合器读取 theme-map，并使用定义的构建器函数将其值作为 CSS 变量写入 :root 选择器。

global-theme-builder 转换主题映射中特定属性值的 RGB 颜色。

编译为 CSS

请确保已安装依赖项。您可以使用 yarn install 或 npm install 命令进行安装。

要构建源文件，请运行以下命令：

yarn build

CSS 文件将在 built 文件夹中创建。

向源文件添加新的主题捆绑包

在 _colors/your-theme/colors.scss 下创建一个新文件，并替换为以下内容：

$theme-map: (
  light: #f0f4f7,
  dark: #062a44,
  navbar-color: #fff,
  navbar-text-color: #445f72,
  navbar-active-text-color: #124163,
  navbar-active-bg-color: #f3f6f9,
);

创建一个新文件 _colors/your-theme/index.scss，并在其中粘贴以下内容：
```
@import "colors";
@import "../common";
```
创建一个新文件 frameworks/bootstrap/your-theme/bootstrap-your-theme.scss，并在其中粘贴以下内容：
```
@import "_colors/your-theme";
@import "../common";
```
最后创建一个新文件 themes/your-theme.scss，并在其中粘贴以下内容：
```
@import "_colors/your-theme";
@import "builders/_builder";
```

其他文件

build.js: 将 SCSS 捆绑包文件构建为 CSS 文件，同时创建 rtl.css 文件。
package.json: 包含依赖项和构建命令。
postcss.config.js: 供 postcss 使用，是从左到右（LTR）转换为从右到左（RTL）所必需的。