在 Vue.js 中的每个组件上使用 BootstrapVue

Question

我正在制作一个 Vue.js Web 应用程序。我正在使用带有 BootstrapVue 和 SCSS 的原始 Vue.js。在我将 scss 样式导入到应用程序入口点（在我的例子中是项目 src 文件夹中的 main.js 文件）后，scss 样式将在全局范围内工作。但是当我在除主文件“App.vue”之外的任何其他 .vue 文件中使用 BootstrapVue 样式时，它们不再起作用。

这是我的 vue.config.js 文件：

module.exports = {
    css: {
        sourceMap: true,
        loaderOptions: {
            sass: {
                prependData: `
                    @import "src/scss/_variables.scss";
                    @import "node_modules/bootstrap/scss/bootstrap";
                    @import "node_modules/bootstrap-vue/src/index.scss";
                `,
            }
        }
    }
};

这是我的 main.js 文件，因此是应用程序的入口点：

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

import "./scss/global.scss";

Vue.config.productionTip = false;

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

我还在 global.scss 中导入了 BootstrapVue。我确实尝试在组件的样式标签中导入我的 global.scss 文件，我尝试直接在我的组件的样式标签中导入 BootstrapVue，但这也不起作用。

所以我基本上是在向您寻求在任何 Vue.js 组件中全局使用 BootstrapVue 的解决方案。也许我犯了一些我没有注意到的错误。控制台中的错误信息并没有真正帮助我解决问题。

编辑：
这是我的 package.json 文件：

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "bootstrap-vue": "^2.14.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

您在@import "node_modules/bootstrap/scss/bootstrap"; 上缺少.scss。应该是@import "node_modules/bootstrap/scss/bootstrap.scss";