如何在package.json中配置Bootstrap的enable-cssgrid变量

Bootstrap 5默认禁用CSS Grid布局，要在npm install后让项目启用该功能，不能直接在dependencies里添加变量，得通过自定义Sass编译的方式实现，具体配置步骤如下：

1. 添加Sass开发依赖
   因为需要编译自定义的Bootstrap样式，先在package.json的devDependencies中加入sass：

   {
     "name": "PROJECT",
     "description": "DESC",
     "dependencies": {
       "backbone": "^1.4.1",
       "bootstrap": "^5.3.0-alpha1",
       "jquery": "^3.6.3"
     },
     "devDependencies": {
       "sass": "^1.60.0"
     }
   }
   

2. 创建自定义Sass入口文件
   在项目里新建src/scss/styles.scss，先启用CSS Grid变量，再导入Bootstrap源样式：

   // 开启CSS Grid功能
   $enable-cssgrid: true;
   
   // 导入完整Bootstrap源文件
   @import "../node_modules/bootstrap/scss/bootstrap";
   

3. 配置编译脚本
   在package.json的scripts中添加Sass编译命令，方便安装依赖后生成启用CSS Grid的样式文件：

   {
     "name": "PROJECT",
     "description": "DESC",
     "scripts": {
       "build:css": "sass src/scss/styles.scss dist/css/styles.css --style compressed",
       "watch:css": "sass --watch src/scss/styles.scss dist/css/styles.css"
     },
     "dependencies": {
       "backbone": "^1.4.1",
       "bootstrap": "^5.3.0-alpha1",
       "jquery": "^3.6.3"
     },
     "devDependencies": {
       "sass": "^1.60.0"
     }
   }
   

4. 生成启用CSS Grid的样式
   用户执行npm install装好所有依赖后，运行npm run build:css就能生成压缩后的样式文件，最后在项目HTML中引入dist/css/styles.css即可使用Bootstrap的CSS Grid布局。

需要注意：Bootstrap官方提供的预编译CSS包默认没开CSS Grid，必须通过自定义Sass编译才能开启这个功能，没法直接在dependencies字段里配置变量实现。

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