Question

在基于Vue-CLI的学习项目中，我在这里做一些荒唐的事很痛苦

我真的不明白为什么我无法在项目中import Bootstrap样式。

这是我的main.js文件：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //here is where the app breaks
import {store} from "./store/store";
import {routes} from "./routes";

Vue.use(BootstrapVue);
Vue.use(VueRouter);

export const router = new VueRouter({
  routes,
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if(savedPosition) {
      return savedPosition
    }
    if (to.hash) {
      return {selector: to.hash}
    }
    return {x: 0, y: 0};
  }
});

new Vue({
  el: '#app',
  store,
router,
  render: h => h(App)
});

这是错误

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/Dev/WebstormProjects/stock-trading-app/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   -ms-text-size-adjust: 100%;
 @ ./src/main.js 5:0-42
 @ multi main

我已经在终端中通过以下代码安装了bootstrap：npm install --save bootstrap。

当我输入要导入bootstrap样式的代码行时，应用会中断...

有些奇怪的是，即使我没有导入，某些bootstrap样式仍在起作用。即使我从BootstrapVue中删除了main.js，某些样式仍然可以使用。

例如，我尝试使用button class创建一个button.btn.btn-primary，即使没有在main.js文件中导入任何内容，它也可以工作...

问题是，当我尝试添加Bootstrap-vue下拉按钮（即<b-dropdown>（https://bootstrap-vue.js.org/docs/components/dropdown/）时，此按钮不起作用...

如果有人需要更多信息以帮助我，我将继续编辑问题以添加尽可能多的信息。

谢谢。

干杯。

我在将Bootstrap样式导入vue-cli项目时遇到问题

0 个答案: