新手npm Bootstrap项目疑问：Sass自定义、编译及架构规范

1. custom.scss 文件的创建位置 #

建议放在项目源码目录下的专门样式文件夹中，比如 src/scss/custom.scss。这个位置既能方便引用 Bootstrap 的 Sass 源文件，又能和项目其他源码（TS、HTML）清晰分离，让整体结构更规整。

注意：文件路径要保证能正确找到 node_modules 里的 Bootstrap Sass 文件，后续编译时也能方便指定输出位置。

2. 配置 Sass 监听与编译 #

步骤1：编写 custom.scss 内容 #

在 custom.scss 中先定义自定义变量，再导入 Bootstrap 核心样式（这样你的自定义变量会覆盖 Bootstrap 默认值）：

// 自定义Bootstrap全局变量
$primary: #2563eb;
$body-bg: #f1f5f9;
$border-radius: 0.5rem;

// 导入Bootstrap完整Sass源文件
@import "../../node_modules/bootstrap/scss/bootstrap";

（路径根据你的项目结构调整，确保能定位到 bootstrap/scss/bootstrap 文件）

步骤2：在 package.json 中添加编译命令 #

打开 package.json，在 scripts 字段中添加两个命令：

{
  "scripts": {
    "build:css": "sass src/scss/custom.scss dist/css/style.css",
    "watch:css": "sass --watch src/scss/custom.scss dist/css/style.css"
  }
}

• build:css：一次性将 custom.scss 编译到指定输出文件（比如 dist/css/style.css）
• watch:css：监听 custom.scss 及其导入的所有文件变化，自动重新编译

步骤3：运行命令 #

• 一次性编译：执行 npm run build:css
• 实时监听编译：执行 npm run watch:css，保持终端打开，修改 scss 文件后会自动生成新的 CSS

3. 前端项目架构最佳实践 #

不需要单独创建 my-edits 这类模糊的目录，建议采用按资源类型/功能分离的标准结构，示例如下：

your-project/
├── src/
│   ├── html/          # 存放HTML页面文件（也可命名为pages/）
│   ├── scss/          # 所有Sass样式文件
│   │   ├── custom.scss # Bootstrap自定义入口
│   │   └── components/ # 组件级自定义样式（如按钮、卡片）
│   ├── ts/            # TypeScript代码
│   │   ├── main.ts    # 主入口文件
│   │   └── utils/     # 工具函数模块
│   └── assets/        # 静态资源：图片、字体、图标等
├── dist/              # 编译后的输出目录（CSS、JS、HTML等）
├── node_modules/
├── package.json
└── tsconfig.json

核心原则： #

• 源码与产物分离：src/ 存放未编译的源码，dist/ 存放编译后的可部署文件，便于CI/CD流程和部署操作
• 按类型组织：同类资源集中存放，方便快速查找和维护（比如所有样式在scss/，所有TS代码在ts/）
• 模块化拆分：将复杂样式或代码拆分成小模块，避免单个文件过大，提升可维护性

这样的结构符合前端开发通用规范，后续扩展功能、接入打包工具（如Webpack）也会更顺畅。

内容的提问来源于stack exchange，提问作者Louis