Vue.js 如何仅从Nuxt中的buefy导入导航栏、下拉菜单和模式？ 我试图从Buefy中只导入Navbar、Modal和Dropdown，并在尝试同样的操作时遇到错误 我也只想要相关的scss文件 到目前为止，我已经尝试了多种方法，但都没有效果

方法1

• npx创建nuxt应用程序custombuefy
• 不要在此处选择任何前端框架

步骤1安装Bulma

• npm i节点sass sass加载程序-D
• 延髓
• 在资产目录中的样式文件夹中创建app.scss
• @在app.scss中导入“~bulma”
• 在nuxt.config.js的css部分中包含“~/assets/styles/app，scss”
• npm运行构建和npm运行启动，检查带有Bulma的页面是否在本地主机上运行：3000
• 在此阶段成功运行

第2步安装不带nuxt Buefy的普通Buefy

• 我是布菲
• 在插件目录中创建buefy.js文件
• 将“~/plugins/buefy.js”添加到nuxt.config.js的plugins部分
• 添加以下代码以从buefy导入BDropdown、BModal、BNavbar

最初在这里直接包含CSS

import Vue from 'vue'
import { BDropdown, BDropdownItem, BModal, BNavbar } from 'buefy'
import 'buefy/dist/buefy.min.css'

Vue.use(BDropdownItem)
Vue.use(BDropdown)
Vue.use(BModal)
Vue.use(BNavbar)

• 将下拉列表添加到代码索引中

pages/index.vue文件

<template>
  <div class="container">
    <div>
      <logo />
      <b-dropdown aria-role="list">
        <button
          slot="trigger"
          slot-scope="{ active }"
          class="button is-primary"
        >
          <span>Click me!</span>
          <b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
        </button>

        <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
        <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
        <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
      </b-dropdown>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo,
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

结果

 ERROR  Cannot read property 'install' of undefined                                                                                                                                                                                                                                                        16:19:41

  at Function.t.use (node_modules/vue/dist/vue.runtime.common.prod.js:6:36869)
  at Module.<anonymous> (server.js:1:559776)
  at r (server.js:1:194)
  at Object.<anonymous> (server.js:1:5233)
  at r (server.js:1:194)
  at server.js:1:1259
  at Object.<anonymous> (server.js:1:1269)
  at o (node_modules/vue-server-renderer/build.prod.js:1:77607)
  at node_modules/vue-server-renderer/build.prod.js:1:78200
  at new Promise (<anonymous>)

 ERROR  Cannot use import statement outside a module                                                                                                                                                                                                                                                       16:23:03

  (function (exports, require, module, __filename, __dirname) { import './chunk-6ea13200.js';
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:88:7)
  at createScript (vm.js:263:10)
  at Object.runInThisContext (vm.js:311:10)
  at wrapSafe (internal/modules/cjs/loader.js:1059:15)
  at Module._compile (internal/modules/cjs/loader.js:1122:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (internal/modules/cjs/helpers.js:77:18)

结果

 ERROR  Cannot read property 'install' of undefined                                                                                                                                                                                                                                                        16:19:41

  at Function.t.use (node_modules/vue/dist/vue.runtime.common.prod.js:6:36869)
  at Module.<anonymous> (server.js:1:559776)
  at r (server.js:1:194)
  at Object.<anonymous> (server.js:1:5233)
  at r (server.js:1:194)
  at server.js:1:1259
  at Object.<anonymous> (server.js:1:1269)
  at o (node_modules/vue-server-renderer/build.prod.js:1:77607)
  at node_modules/vue-server-renderer/build.prod.js:1:78200
  at new Promise (<anonymous>)

 ERROR  Cannot use import statement outside a module                                                                                                                                                                                                                                                       16:23:03

  (function (exports, require, module, __filename, __dirname) { import './chunk-6ea13200.js';
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:88:7)
  at createScript (vm.js:263:10)
  at Object.runInThisContext (vm.js:311:10)
  at wrapSafe (internal/modules/cjs/loader.js:1059:15)
  at Module._compile (internal/modules/cjs/loader.js:1122:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (internal/modules/cjs/helpers.js:77:18)

方法3

让我们改用components目录中的组件。我们再次修改plugins/buefy.js文件，如下所示

import Vue from 'vue'
import { BDropdown, BDropdownItem } from 'buefy/dist/components/dropdown'
import 'buefy/dist/buefy.min.css'

Vue.use(BDropdownItem)
Vue.use(BDropdown)

结果

 ERROR  Cannot read property 'install' of undefined                                                                                                                                                                                                                                                        16:19:41

  at Function.t.use (node_modules/vue/dist/vue.runtime.common.prod.js:6:36869)
  at Module.<anonymous> (server.js:1:559776)
  at r (server.js:1:194)
  at Object.<anonymous> (server.js:1:5233)
  at r (server.js:1:194)
  at server.js:1:1259
  at Object.<anonymous> (server.js:1:1269)
  at o (node_modules/vue-server-renderer/build.prod.js:1:77607)
  at node_modules/vue-server-renderer/build.prod.js:1:78200
  at new Promise (<anonymous>)

 ERROR  Cannot use import statement outside a module                                                                                                                                                                                                                                                       16:23:03

  (function (exports, require, module, __filename, __dirname) { import './chunk-6ea13200.js';
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:88:7)
  at createScript (vm.js:263:10)
  at Object.runInThisContext (vm.js:311:10)
  at wrapSafe (internal/modules/cjs/loader.js:1059:15)
  at Module._compile (internal/modules/cjs/loader.js:1122:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (internal/modules/cjs/helpers.js:77:18)

现在我得到一个新的错误，在浏览器控制台中显示未知的自定义元素，下拉列表显示完全中断

如果这是一个依赖性问题，下面是我的package.json文件

{
  "name": "custombuefy",
  "version": "1.0.0",
  "description": "My marvelous Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "npm run lint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.9.7",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "buefy": "^0.8.15",
    "bulma": "^0.8.2",
    "cross-env": "^7.0.2",
    "express": "^4.17.1",
    "nuxt": "^2.12.2"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.2",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/stylelint-module": "^3.2.2",
    "@vue/test-utils": "^1.0.0-beta.33",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.3.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-nuxt": ">=0.5.2",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^4.2.5",
    "jest": "^25.3.0",
    "lint-staged": "^10.1.5",
    "node-sass": "^4.13.1",
    "nodemon": "^2.0.3",
    "prettier": "^2.0.4",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.3.2",
    "vue-jest": "^4.0.0-0"
  }
}

有人能告诉我如何从Buefy只导入下拉菜单、导航栏和模式，而不会遇到所有这些错误吗

import Vue from 'vue'
import { Dropdown, Icon } from 'buefy'

Vue.use(Dropdown)
Vue.use(Icon)

已修复该问题，但组件级SCS仍不工作

将app.scss作为

@import "~bulma";
@import "~buefy/src/scss/buefy";

Buefy样式未应用于下拉列表

更新 甚至可以部分导入SCS

@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_autocomplete";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_notices";

---

甚至可以部分导入SCS