在 .vue 文件中访问全局 sass 变量和引导程序

Posted 2023-02-22

【中文标题】在 .vue 文件中访问全局 sass 变量和引导程序

【英文标题】：Accessing global sass variables and bootstrap in .vue files

【发布时间】：2016-06-06 12:35:08

【问题描述】：

我需要我的 Vue 组件从其他“全局”导入中继承样式和变量。

我不想在每个组件中都导入变量和引导程序，这似乎非常多余并且不是最佳实践。

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

有什么想法吗？

【问题讨论】：

另一个需要考虑的解决方案***.com/a/40411033/1794871。对于 Vue，我在一个地方管理我的所有 .scss 文件，例如App.vue。祝你好运。

【参考方案1】：

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

您可以查看here 引导文档。

// 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';"
      

【参考方案2】：

我知道除了@import 每个组件中的变量文件之外别无他法。就像我们必须导入/要求我们在每个组件中使用的 npm 库一样。

【讨论】：

对于使用 Bootstrap 4 的任何人，您需要先导入 _functions.scss，然后再导入 _variables.scss。