Question

我在Webpack配置中添加了一个路径

 "mixins": path.resolve(
        __dirname,
        "resources/assets/sass/mixins/mixins.scss"
      ),

这意味着我使用的所有单个文件组件

<style lang='scss' scoped>
    @import '~variables';

这正常工作，但是我发现此文件在95％的组件中使用，因此导入实际上是不必要的。我希望这些var随处可见。

如何在不将每个文件导入的情况下将SASS全局添加到单个文件组件中？

Answer 1

好吧，从Webpack加载您的通用CSS，并使其在所有组件中全局可用。 Webpack的配置如下。

sass-loader还支持data选项，该选项使您可以在所有已处理文件中共享公用变量，而不必显式导入它们。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  }
};

在这里，在loaderOptions选项下指定sass加载器。这样，这些文件中的所有代码将在全局范围内可用。因此，我们可以从任何组件中直接使用它：

现在您无需导入即可访问Vue SFC中的变量。

<style lang="scss">
.classroom {
  /* No need to import, it just works \o/ */
  background: $bg-classroom;
}
</style>

参考官方文档here

希望这会有所帮助！

Vue SFC将全局Sass变量添加到所有组件

1 个答案: