Nuxt.js 常用 SCSS 模块？

Question

我有一个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. 访问它

Answer 1

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

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

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