Question

我必须将两个项目合并为一个。一个是Vuetify，一个是Bulma，用于程式化。

当我设法进行验证工作时，显而易见，布尔玛迷失在了scss中（在布尔玛起作用之前）。我尝试更改Webpack，Sass加载程序。

在我的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";

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

1 个答案: