Laravel 5.4在使用bulma和buefy編譯npm run dev時出錯

Question

當我嘗試在終端中運行npm dev時，我試圖編譯在節點模塊上導入的所有組件。 這是代碼：

位於資源資產文件夾中的App.scss

// Variables
@import "variables";

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// Bulma
@import "node_modules/bulma/bulma";

// Bulma Vue Modules
@import "node_modules/buefy/src/scss/buefy";

這也是位於資產文件夾中的App.js：

require('./bootstrap');



window.Vue = require('vue');



import Buefy from 'buefy';



Vue.use(Buefy);

這是終端中的錯誤，但是我已經安裝了node.js，因為我曾經使用node js和cordova在ionic 2中創建項目：

ERROR  Failed to compile with 2 errors                              11:03:38 AM

 error  in ./resources/assets/sass/app.scss

Module build failed: 
                        background: $table-row-active url(checkmark($table-row-active-background)) no-repeat center center;
                                   ^
      Undefined variable: "$table-row-active".
      in /home/jayzdevera/Documents/DevMarketer/node_modules/buefy/src/scss/components/_table.scss (line 61, column 37)

 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed: 
                        background: $table-row-active url(checkmark($table-row-active-background)) no-repeat center center;
                                   ^
      Undefined variable: "$table-row-active".
      in /home/jayzdevera/Documents/DevMarketer/node_modules/buefy/src/scss/components/_table.scss (line 61, column 37)
    at runLoaders (/home/jayzdevera/Documents/DevMarketer/node_modules/webpack/lib/NormalModule.js:194:19)
    at /home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/jayzdevera/Documents/DevMarketer/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/home/jayzdevera/Documents/DevMarketer/node_modules/async/dist/async.js:2244:31)
    at Object.callback (/home/jayzdevera/Documents/DevMarketer/node_modules/async/dist/async.js:906:16)
    at options.error (/home/jayzdevera/Documents/DevMarketer/node_modules/node-sass/lib/index.js:294:32)

     Asset     Size  Chunks                    Chunk Names
/js/app.js  1.27 MB       0  [emitted]  [big]  /js/app

npm ERR! Linux 4.10.0-28-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "development"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jayzdevera/Documents/DevMarketer/npm-debug.log

npm ERR! Linux 4.10.0-28-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jayzdevera/Documents/DevMarketer/npm-debug.log

這是laravel混合顯示的顯示，我不知道這是怎么發生的：

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

Answer 1

那是因為Buefy不支持bulma v5但是您可以做的是卸載bulma v5然后安裝bulma v4檢查問題 ：

npm uninstall bulma@0.5.0

然后

npm install bulma@0.4.3