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

Question

我的webpack配置我添加了一个路径

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

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

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

这工作正常，但我发现这个文件在95％的组件中使用，所以导入真的是不必要的。我希望这些变量无处不在。

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

Answer 1

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

sass-loader还支持数据选项，允许您在所有已处理文件之间共享公共变量，而无需显式导入它们

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

在这里，在loaderOptions选项下指定sass加载器。就像那样，这些文件中的所有代码都可以在全局范围内使用。因此，从任何组件我们都可以开箱即用：

现在，您可以在不导入Vue SFC的情况下访问Vue SFC中的变量。

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

参考官方文件here

希望这可以帮助！