时间戳

首页 > 解决方案 > Nuxt.js 常用 SCSS 模块？

vue.js - Nuxt.js 常用 SCSS 模块？

问题描述

我有一个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将为每个组件导入内容，从而在最终构建的捆绑包中产生许多重复。有没有办法只导入一次这个文件并将其重用于所有组件？

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

标签： vue.jssassnuxt.js

解决方案

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

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

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

推荐阅读