【Vue】帮元件加上样式啦｜修改 bootstrap 变数供全域样式共用 失败

将样式区分为全域样式/区域样式

全域样式：大多页面都会共用到的样式，reset & variable & maxin ...
区域样式：限制在单一元件里使用，不想渲染到其他样式。

<style scpoed>
</style>

背景

引用的 "bootstrap": "^5.1.3"因为颜色不符合专案需求，要重新宣告 bootstrap variable 的样式，实作前在查资料看到sass loader，原来 sass-loader 可以免於每个元件都一直重复引入变数。

先了解 SCSS 和 CSS 转换概念

• 在 APP.vue & main.js 引入，都已经将 SCSS 转换为 CSS，就没有变数可以使用。
• 在 vue.config.js 使用 webpack 引入，此时是变数的状态可供使用。

实际操作

1. 从 bootstrap/scss/_variable.scss 复制一份到 src/assets/scss/custom.scss

2. 调整要修改的样式，并删掉後面 !default

$primary:       $green ;
$secondary:     $gray-600 !default;

3. 安装 node-sass 及 sass-loader

npm install node-sass sass-loader -D

4. 新增 vue.config.js

module.exports = {
    css: {
      loaderOptions: {
        scss: {
          prependData: `@import "@/assets/scss/custom.scss";`
        }
      }
    }
};

npm run serve 就出现错误讯息了? 目前还无解，有请大神帮帮忙！！

Syntax Error: SassError: ("primary": #7F977B, "secondary": #6c757d, "success": #7F977B, "info": #0dcaf0, "warning": #ffc107, "danger": #FF725E, "light": #f8f9fa, "dark": #212529) isn't a valid CSS value. ╷ 94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; │ ^^^^^^^^^^^^^ ╵

参考来源：
https://wcc723.github.io/css/2016/12/17/bootstrap-custom/
https://leahlin912.github.io/2019/06/17/Webpack-在vue专案中引用SCSS/
https://medium.com/unalai/vue-专案中引入-scss-档案的四种方法-该如何使用呢-9babcd3a4ef1