Nuxt.js 常用 SCSS 模块？

Posted 2023-02-22

【中文标题】Nuxt.js 常用 SCSS 模块？

【英文标题】：Nuxt.js common SCSS modules?

【发布时间】：2021-05-05 06:00:51

【问题描述】：

我有一个util.scss 文件，我想将它包含在几个组件中：

.grid 
  display: grid;
  grid-template-columns: 1fr 1fr;
  ...

我在我的组件中导入并使用这个文件，如下所示：

<template>
  <div :class="$style.grid"> ... </div>
</template>

<style lang="scss" module>
@import 'util.scss';

...
</style>

这样，将为每个组件导入util.scss 内容，从而导致最终构建的捆绑包中有许多重复项。有没有办法只导入一次这个文件并为所有组件重复使用它？

我知道我可以使用nuxt.config.js 中的css 属性将文件作为普通样式表全局导入，但这不允许使用$style. 访问它

【问题讨论】：

您确实可以设置一个assets/scss/global.scss 文件并将其设置在nuxt.config.js 和css: ['~/assets/scss/global.scss'], 中。在我身边工作得很好。在这种情况下你真的需要使用$style 吗？它会比普通课程带来什么？

@kissu 我当然不会用这种方法混淆类，但我想这就是我必须做的。

【参考方案1】：

您应该使用@nuxtjs/style-resources 模块。 它以前在核心中实现，但最近已在特定模块中分离。 （参见nuxt docs）

只需在 nuxt 配置中链接您的 css 文件，它就会自动导入到每个 css 文件/组件样式标签中:)

// nuxt.config.js
styleResources: 
   scss: ['~/assets/scss/global.scss'],

【讨论】：

这适用于例如变量，但不适用于在我的示例 util.scss 文件中看到的实际样式。这将导致util.scss 中的所有样式都包含在每个 组件中，从而增加了构建大小。这也提到了here。

你是对的，当然。而且我不知道有什么更好的方法不会导致 css 模块重复...