VueJS 中的全局样式与本地样式

Question

我正在使用 .vue 文件构建一个项目，这使得在同一个文件中编写 CSS (SASS)、JS 和 HTML 成为可能。

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

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

在本地看起来是这样的：

<template>
</template>

<script>
</script>

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

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

它确实有效，例如我可以在我的本地 .vue 文件中使用 $my-variable 或任何我想要的 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。