VueJS中的全局样式与局部样式

Question

我正在建立一个包含.vue个文件的项目，这使得可以在同一文件中编写CSS（SASS），JS和HTML。

我决定在assets/styles/app.scss文件中用SASS编写一些全局组件，这些组件将加载我的网格，变量和混合。

最重要的是，我希望能够根据我所在的组件/页面编写一些本地SASS规则，似乎希望在项目中同时使用这两个组件似乎很合逻辑...

在本地看起来像这样：

<template>
</template>

<script>
</script>

<style lang="scss">
  @import "assets/styles/app";

  .my-style {
    color: $my-variable;
  }
</style>

它确实有效，例如，我可以在本地$my-variable文件中使用.vue或任何所需的mixin。问题在于VueJS项目将增长，组件将一起显示页面。

我注意到全局样式已加载到每个组件上，并且在打开chrome开发人员工具时，在5x和10x中存在相同的规则。这仍然是一个很小的项目。每次我将组件添加到同一页面时，浏览器都会复制并加载所有我的样式。

在能够在每个组件中使用全局SASS代码的同时，如何避免多次加载全局样式？

以前，我从未将本地样式与全局样式混合使用，我更喜欢将样式完全抽象为单独的结构，但这对于在同一位置使用所有本地样式进行编码更方便。

我在这里做什么错了？

详细信息：我正在使用NuxtJS，但我认为这个问题与VueJS总体上有关。

Answer 1

基本上，每次在组件中执行@import时，它都会将另一个副本附加到Webpack生成的主CSS文件中。

假设您已经正确配置了Webpack SCSS加载程序（我相信您已经进行了编译，因为这样做了），您应该能够将app.vue中的SCSS文件导入一次，并且SCSS编译器会在追加后找到它所有其他CSS。

例如，获取全局字体和混合：

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/mixins.scss";
</style>

然后为组件的<style>部分中的每个组件创建CSS。只需确保添加lang="scss"即可编译。

您可能还想研究scss-resource-loader的Webpack。我认为这是最新的CLI构建，不确定Nuxt。