如何在 Vue3 中自定义 Bootstrap5？答案

【问题标题】：How could I customize Bootstrap5 in Vue3?如何在 Vue3 中自定义 Bootstrap5？
【发布时间】：2022-01-18 12:49:46
【问题描述】：

伙计们，我使用的是 Vue3 和 Bootstrap 5。除非我想自定义 Bootstrap 默认主题，否则一切都很好。
例如，我想更改原色，我在 "src\scss" 中创建了一个 custom.scss ，内容为：

// Default variable overrides
$primary:#255232;
@import "../node_modules/bootstrap/scss/bootstrap";

然后，我在main.js中导入custom.scss，js中的内容为：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
//Import scss here
import "scss/custom.scss";
import "bootstrap/dist/js/bootstrap";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap-icons/font/bootstrap-icons.css";
createApp(App).use(router).mount("#app");

但它会出现错误：

 ERROR  Failed to compile with 1 error                   

This dependency was not found:

* scss/custom.scss in ./src/main.js

To install it, you can run: npm install --save scss/custom.scss
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.
tmp'

我应该怎么做才能解决这个问题？谢谢。

Here is my project structure:
    my-project/
    ├──src/
    │   │──scss/
    │   │    └── custom.scss
    │   └────────main.js
    └──node_modules/
         └── bootstrap/

【问题讨论】：

标签： vuejs3 bootstrap-5

【解决方案1】：

更新：

我尝试使用文件观察器来解决这个问题。但我认为有一个更简单的解决方案，如果有人能告诉我，我将不胜感激，谢谢！

这是我的解决方案：
我使用 WebStrom 并将 File Wtacher 添加到 scss 文件。 scss内容：

// Default variable overrides
$primary:#255232;
@import "../../node_modules/bootstrap/scss/bootstrap";

我把它放在/src/scss/custom.scss

在main.js 中添加scss 在文件观察器转换为css 后：

import "../src/scss/custom.css";

【讨论】：

我认为这是一个很好的解决方案。