iT邦幫忙

0

【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;
  1. 安裝 node-sass 及 sass-loader
npm install node-sass sass-loader -D
  1. 新增 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


尚未有邦友留言

立即登入留言