Javascript 引导vue不'；不加载CSS

我正在用Bootstrap 4编写一个Vue.js应用程序，虽然我遵循了文档，但无法加载

添加到main.js

Vue.use（BootstrapVue）

添加到与App.vue相关的css文件：

@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

以下是模板：

<div class="main">
<div>

    <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
        <p class="my-4">{{msg}}</p>
        <p class="my-4">{{statusCode}}</p>

    </b-modal>
</div>

<div>
    <b-tab title="Players" active>
        <br>Players data
    </b-tab>
    <b-tab title="Tournaments" active>
        <br>Tournament data
    </b-tab>
</div>


{{msg}
{{statusCode}

玩家数据

锦标赛数据


结果：未呈现css，但在来自dist dir的css文件中我看到了引导
我错过了什么？vue cli 3.0-beta创建的项目请尝试使用JavaScript导入文件

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


仔细检查，您似乎丢失了


另外，
由
v-model

<div class="main">
    <div>
        <b-modal id="modal1" title="Something went wrong" v-model="errorModal">
            <pre class="my-4">{{ msg }}</pre>
            <p class="my-4">{{ statusCode }}</p>
        </b-modal>
    </div>
    <!-- Make sure to wrap b-tab in b-tabs -->
    <b-tabs> 
        <b-tab title="Players" active>
                <br>Players data
        </b-tab>
        <b-tab title="Tournaments">
                <br>Tournament data
        </b-tab>
    </b-tabs>
</div>


{{msg}}
{{statusCode}

玩家数据

锦标赛数据

这将修复选项卡的样式。
解决方案：

导入到App.vue：

@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

我遇到了同样的问题，但幸运的是我找到了原因：加载程序未加载：）

确保在
package.json
然后在您的网页配置中，您的模块.rules应具有以下对象：
{
  test: /\.css/,
  use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
}

无需使用
@
或相关
节点模块
路径或任何东西

有了这些变化，Vue 2.5和引导Vue 2.0.0对我来说很有用


更新：

另外，尽管感觉有点不直观，但在main.js中创建
new Vue（）
之前，请确保使用
Bootstrap Vue包。例如：

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

Vue.use(BootstrapVue);

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

如果按相反的顺序操作，则只能部分工作。例如，某些块元素将不会应用样式

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

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

// Doing this after new Vue() will NOT work correctly:
Vue.use(BootstrapVue);

在我的例子中，我使用的是vue cli 4.3.1，错误地使用了此配置

如果删除此配置，则所有配置都可以正常工作


如果要在文件名中删除.module，请在vue.config.js中将css.requireModuleExtension设置为false：

我不得不把其他一些答案组合起来

App.vue：

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Vue from 'vue'


// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'



export default {
  name: 'App',
  components: {
  }
}

资料来源：
我应该导入到组件吗？如果这是您的根组件，您会希望它出现在App.vue中，但仍然不走运。同样的结果你能分享更多的代码吗？我可以看看github，或者用Vue 2.5和引导Vue 2.0.0导入App.vueName。CSS文件不会解析，因为在编译过程中更改路径会引发找不到的错误。没有样式会生效。我和第一个示例中做的完全一样，我使用vscode作为编辑器，但它清楚地表明'BootstrapVue'已声明，但无法读取？？在浏览器控制台中，收到错误[Show/hide message details.]ReferenceError:BootstrapVue未被激活defined@ARUNMadathil：听起来像是
引导vue
软件包没有正确安装。您可以尝试再次运行
npm install bootstrap vue--save
，并检查安装过程中是否出现错误。您应该在项目的
package.json
依赖项中获得一个条目。