在 .vue 文件中访问全局 sass 变量和 bootstrap

Question

我需要我的 Vue 组件从其他 "global" 导入中继承样式和变量。

我不想在每个组件中导入变量和 bootstrap，这看起来很多余，不是最佳实践。

这是基本用法，所以 Vue 一定已经实现了功能。我已经尝试创建一个基础组件，一个 "app.vue" 组件，如果你愿意的话，它有自己的样式，包括变量和 bootstrap，但我的组件仍然无法访问它。

有什么想法吗？

Answer 1

除了 @import 每个组件中的变量文件，我不知道有什么办法。就像我们必须 import/require 我们在每个组件中使用的 npm 库一样。

Answer 2

您可以使用名称为 'prependData' 的 webpack 的 sass 加载程序选项来执行此操作。此代码将添加到每个包含 scss 样式的 .vue 文件的顶部。我知道这很丑陋，但它有效。正如 bootstrap 文档所说。你有两个选择。其中之一是添加整个 bootstrap 文件，另一个是这种技术。

您可以查看 here bootstrap 文档。

// webpack.config.js

      loader: 'sass-loader',
      options: {
        prependData: "@import '~/node_modules/bootstrap/scss/_functions.scss'; @import '~/node_modules/bootstrap/scss/_variables.scss'; @import '~/node_modules/bootstrap/scss/_mixins.scss';"
      }

在 .vue 文件中访问全局 sass 变量和 bootstrap

Accessing global sass variables and bootstrap in .vue files

css

twitter-bootstrap

sass

browserify

vue.js