Question

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

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

这是基本用法，因此Vue必须具备该功能。我已经尝试创建一个基本组件，一个“app.vue”组件，如果你愿意，它有自己的样式，包括变量和引导程序，但我的组件仍然无法访问它。

有什么想法吗？

Answer 1

您可以使用名称为'prependData'的webpack的sass loader选项进行此操作。此代码将添加到每个由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';"
      }

Answer 2

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

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

2 个答案: