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>

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

我注意到每个组件都加载了全局样式，当我打开 chrome 开发人员工具时，相同的规则出现在 5x、10x 中。这仍然是一个非常小的项目；每次我将组件添加到同一页面时，我所有的样式基本上都会被浏览器复制和加载。

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

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

我做错了什么？

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

Answer 1

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

假设您正确配置了 Webpack SCSS 加载器（我相信您会这样做，因为它可以编译），您应该能够在 [=12] 中导入一次 SCSS 文件=] 并且 SCSS 编译器会在附加所有其他 CSS.

时找到它

例如，获取全局字体和 mixins：

<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" 即可全部编译。

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

Answer 2

在App.vue

<style lang="scss">

@import "assets/styles/common.scss";

</style>

或

将已编译的 sass 导入到 main.js

中的 css 文件

import './assets/styles/common.css';

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

Global styling vs local styling in VueJS

css

sass

vue.js

nuxt.js