next .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模块。它以前是在核心中实现的，但最近被分离到一个特定的模块中。(参考next docs)

只需在下次配置中链接你的css文件，它将自动导入到每个css文件/组件样式标签:)

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