javascript Bootstrap-vue 不加载 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49371467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap-vue doesn't load CSS
提问by Alex Bondar
I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation.
我正在使用 Bootstrap 4 编写 Vue.js 应用程序，尽管我按照文档进行了加载，但我无法加载。
Added to main.js
添加到 main.js
Vue.use(BootstrapVue);
Vue.use(BootstrapVue);
Added to css file related to App.vue:
添加到与App.vue相关的css文件中：
@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
Here is template:
这是模板：
<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>
Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta
结果：没有呈现 css 但在来自 dist 目录的 css 文件中我看到 Bootstrap 我错过了什么？vue-cli 3.0-beta 创建的项目
回答by ackushiw
Try importing the files using JavaScript.
尝试使用 JavaScript 导入文件。
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
On closer inspection it looks like you're missing <b-tabs>
also <b-modal>is controlled by v-model
仔细检查后，您似乎丢失了<b-tabs>
也<b-modal>受控制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>
That should fix the styling of the tabs.
这应该修复选项卡的样式。
回答by Juha Untinen
I came across this same issue, but luckily I found the cause: The loader is not loaded :)
我遇到了同样的问题，但幸运的是我找到了原因：加载器未加载:)
- Make sure you have both vue-style-loaderand css-loaderin
package.json - Then in your webpack config, your module.rulesshould have this object:
{ test: /\.css/, use: ['vue-style-loader', 'css-loader'] // BOTH are needed! } - And in your
App.vue, under the<script>section, you should import:import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
- 请确保您有两个VUE式装载机和CSS-装载机在
package.json - 然后在你的 webpack 配置中，你的module.rules应该有这个对象：
{ test: /\.css/, use: ['vue-style-loader', 'css-loader'] // BOTH are needed! } - 在您的
App.vue, 在该<script>部分下，您应该导入：import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
No need to use @or relative node_modulespaths or anything.
无需使用@或相对node_modules路径或任何东西。
With these changes, it worked for me with Vue 2.5 and Bootstrap-Vue 2.0.0
通过这些更改，它在 Vue 2.5 和 Bootstrap-Vue 2.0.0 中对我有用
Update:
更新：
Also, even though it feels a bit counter-intuitive, make sure you use()the Bootstrap-Vue package BEFOREyou create the new Vue()in main.js. For example:
此外，尽管感觉有点违反直觉，但在创建main.js之前，请确保use()使用 Bootstrap-Vue 包。例如：new 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),
});
If you do it in reverse order, it works only partially. For example some block elements will not have styles applied.
如果您以相反的顺序执行此操作，则只能部分起作用。例如，某些块元素将不会应用样式。
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);
回答by perezmlal
In my case I was working with vue-cli 4.3.1, and I was using this configuration by error.
就我而言，我使用的是 vue-cli 4.3.1，但我错误地使用了此配置。
If you remove this configuration then all work nice!
如果您删除此配置，则一切正常！
https://cli.vuejs.org/guide/css.html#css-modules
https://cli.vuejs.org/guide/css.html#css-modules
If you want to drop the .module in the filenames, set css.requireModuleExtension to false in vue.config.js:
如果要删除文件名中的 .module，请在 vue.config.js 中将 css.requireModuleExtension 设置为 false：
// vue.config.js
module.exports = {
css: {
requireModuleExtension: false
}
}
回答by Alex Bondar
Solution:
解决方案：
Import to App.vue:
导入到 App.vue：
'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
