Bulma + Vuetify 无法使用 Vuejs 访问 scss 变量

Question

我不得不将 2 个项目合二为一。一个有 Vuetify，原版有 Bulma 用于风格化。

当我设法使 vuetify 工作时，bulma 显然迷失在 scss 中（在 bulma 工作之前）。我尝试更改 Webpack，sass Loaders。

请告诉我的package.json

"dependencies": {
  "bulma": "^0.7.5",
  "core-js": "^3.6.4",
  "vue": "^2.6.11",
  "vue-router": "^3.1.5",
  "vuetify": "^2.2.22",
  "vuex": "^3.1.2"


"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^2.26.0",
  "@typescript-eslint/parser": "^2.26.0",
  "@vue/cli-plugin-babel": "~4.3.0",
  "@vue/cli-plugin-eslint": "~4.3.0",
  "@vue/cli-plugin-router": "~4.3.0",
  "@vue/cli-plugin-typescript": "~4.3.0",
  "@vue/cli-plugin-vuex": "~4.3.0",
  "@vue/cli-service": "~4.3.0",
  "@vue/eslint-config-airbnb": "^5.0.2",
  "@vue/eslint-config-typescript": "^5.0.2",
  "fibers": "^4.0.2",
  "node-sass": "^4.13.1",
  "sass": "^1.26.3",
  "sass-loader": "^8.0.2",
  "typescript": "~3.8.3",
  "vue-cli-plugin-pug": "^1.0.7",
  "vue-cli-plugin-vuetify": "~2.0.5",
  "vue-template-compiler": "^2.6.11",
  "vuetify-loader": "^1.3.0",
  "webpack": "^4.42.1",
  "css-loader": "^1.0.0",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "style-loader": "^0.21.0",
  "webpack-cli": "^3.0.8"

我在 stackoverflow 中尝试了其他解决方案，但没有为 2 个 scss 库找到一个解决方案，并且不确定是否可行。

main.scss
// If imported the css like bellow, it works, but then, I can not edit.
@import '~bulma/css/bulma.css';

// If imported like bellow I got the error.
@import '~bulma/bulma';

编译时出错：

ERROR  Failed to compile with 1 errors  5:14:57 PM

 error  in ./src/assets/main.scss

Module build failed (from ./node_modules/sass-loade
r/dist/cjs.js):
SassError: $color: ("base": #ff9800, "lighten-5": #
fff3e0, "lighten-4": #ffe0b2, "lighten-3": #ffcc80,
 "lighten-2": #ffb74d, "lighten-1": #ffa726, "darke
n-1": #fb8c00, "darken-2": #f57c00, "darken-3": #ef
6c00, "darken-4": #e65100, "accent-1": #ffd180, "ac
cent-2": #ffab40, "accent-3": #ff9100, "accent-4": 
#ff6d00) is not a color.
   ╷
46 │   $color-rgb: ('red': red($color),'green': gre
en($color),'blue': blue($color))
   │                       ^^^^^^^^^^^
   ╵
  node_modules/bulma/sass/utilities/functions.sass 
46:23          colorLuminance()
  node_modules/bulma/sass/utilities/functions.sass 
59:8           findColorInvert()
  node_modules/bulma/sass/utilities/derived-variabl
es.sass 13:17  @import
  node_modules/bulma/sass/utilities/_all.sass 5:9  
               @import
  node_modules/bulma/bulma.sass 3:9                
               @import
  /Users/fabiopaitra/Github/voucard-firebase/src/as
sets/main.scss 7:9                                 
                      root stylesheet

 @ ./src/assets/main.scss 4:14-254 14:3-18:5 15:22-
262
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168
.0.95:8080/sockjs-node (webpack)/hot/dev-server.js 
./src/main.ts

我做错了什么？

Answer 1

根据Bulma docs，您必须通过以下方式导入 scss 入口点：

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";