Bootstrap-vue 不加载 CSS webpack 应用程序

Question

我正在用 bootstrap 4 编写一个 vuejs 应用程序。我按照文档进行操作，它确实适用于我的本地计算机项目。但是一旦我将它安装在远程服务器项目（webpack 项目：我是这类项目的新手）上，它就没有工作，它使整个项目崩溃（继续加载）。我添加到 main.js

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

Vue.use(BootstrapVue);

我在 package.json[= 中有 vue-style-loader 和 css-loader 16=]

我在 webpack.config module.rules

中添加了

{
  test: /\.css/,
  use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
}

但是什么都没有改变我错过了什么吗？对初学者有什么建议吗？

Answer 1

在main.ts（或.js）：

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

来自 docs.

作为替代方案，如果您热衷于在您的 SCSS 文件之一中使用 @import，请使用：

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

或：

@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

至于“给初学者的提示”：

Bootstrap-vue doesn't load CSS webpack app