定制 bootstrap5 主题颜色方案，消除 sass 编译警告信息
- 作者： 刘杰
- 来源： 技术那些事
- 阅读：139
- 发布： 2025-09-03 12:19
- 最后更新： 2025-09-03 12:19
今天想要用 bootstrap5 做一个响应式的前端页面。想自定义下主题颜色。项目用的 是 vite + Vanilla + bootstrap5 来实现。vite 用的最新版本 7.1.4，然后由于要使用 sass，也安装的最新版本 1.92.0，bootstrap5最新版本为 v5.3.8。vite7 要求 sass 的最低版本为 sass@"^1.70.0"。
配置 Bootstrap@5.3.8 的兼容环境，去掉警告信息
简单配置后，在入口文件中，引入全局样式文件（main.scss）这个文件，就用来加载 bootstrap5 的样式作为全局样式。
scss
@import "@/scss/variables";
@import "/node_modules/bootstrap/scss/bootstrap";
配置好后，发现vite服务中报出一堆的警告信息，如下：
bash
eprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
7 │ @import "@/scss/variables";
│ ^^^^^^^^^^^^^^^^^^
╵
src\scss\main.scss 7:17 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
9 │ @import "/node_modules/bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\scss\main.scss 9:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
1 │ @import "mixins/banner";
│ ^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\bootstrap.scss 1:9 @import
src\scss\main.scss 9:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
7 │ @import "functions";
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\bootstrap.scss 7:9 @import
src\scss\main.scss 9:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
8 │ @import "variables";
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\bootstrap.scss 8:9 @import
src\scss\main.scss 9:9 root stylesheet
Warning: 84 repetitive deprecation warnings omitted.
主要都是由于 sass 的导入功能从 @import 升级为了 @use，后续的新版本的开发，都推荐用 @use 而尽量不用 @import。开始想通过屏蔽这些警告信息，省的一些错误暴漏出来后不好看到。需要在vite 服务配置中启用错误等级，只保留 Error，结果，这么操作后发现这些警告仍然存在。需要在 scss 的配置项中，启用相应的模块，才能去掉这些警告，但是需要使用的 deprecation 的模块还有很多，需要挨个配置，也很麻烦。
最终，还是决定将开发环境降级，配置到 bootstrap@5.3.8 适配的环境。bootstrap@5.3.8 查了下，需要 sass 支持版本为 1.63.x。看了下此版本下的稳定版本 1.63.6，那就用它了。
bash
$ npm view sass@1.63 version
sass@1.63.0 '1.63.0'
sass@1.63.1 '1.63.1'
sass@1.63.2 '1.63.2'
sass@1.63.3 '1.63.3'
sass@1.63.4 '1.63.4'
sass@1.63.5 '1.63.5'
sass@1.63.6 '1.63.6'
确定了 sass 的版本，就需要反过来看 vite 哪个版本支持它。查了下 vite@6 版本对 Sass 的依赖要求是 >=1.32.0,所以，将 vite 降低一个大版本，就完全可以了。因为 vite 的迭代速度很快，6 和 7 的升级，并没有说非用不可的底部。所以 vite@6 完全可以接受。用vite@6 的最新版本稳定版本 6.35。
bash
$ npm view vite@6 version
vite@6.0.0 '6.0.0'
# ... 此处省略部分
vite@6.3.0 '6.3.0'
vite@6.3.1 '6.3.1'
vite@6.3.2 '6.3.2'
vite@6.3.3 '6.3.3'
vite@6.3.4 '6.3.4'
vite@6.2.7 '6.2.7'
vite@6.1.6 '6.1.6'
vite@6.3.5 '6.3.5'
所以最终的环境版本就定为：
- vite@6.35
- sass@1.63.6
- bootstrap@5.3.8
重新安装完毕后，重启 vite 服务，发现果然警告信息都消失了。而且老版本中使用 @use 是完全没问题的。这样 @import 不会警告，@use 也可以正常使用。
定制主题色
接下来就是定制主题颜色，最快的方式就找一些现有的主题风格，看是否符合我的要求，毕竟我是做后端开发，对于设计方面实在是不擅长。还是拿来主义更实用。
网上检索了下，好像以前 bootstrap 的颜色方案定制的工具站也少了许多，仅有的几个还访问受限（需要翻墙），最后还是找了一个：https://bootswatch.com/，可以看下，这个站有十几个已经弄好的配色方案。选了几个，只需要将 _variables.scss文件下载下来，然后将里面的变量拷贝到我们自己的变量文件中就可以预览效果了。
