小编Don*_*ony的帖子

我从 Vue CLI 切换到Vite CLI，从 Vue 3 的 Composition API 切换到SFC Script setup API。

以前对我来说效果如何

当我使用官方 Vue CLI 时，我可以通过 props 传递路径的文件名来导入图像源：

<template>
  <img :src="require(`@/assets/${imagePath}`)"/>
<template/>

<script>
export default {
  props: {
    imagePath: { type: String },
  },
  setup() {
    // ...
  }
}
<script/>

然后这样称呼它：

<template>
  <Image imagePath="icon.png" />
</template>

迁移到Vite后出现的错误

但自从我迁移到Vite CLI后，出现了“Uncaught ReferenceError: require is not Defined”的错误。我的文件现在使用脚本设置语法，如下所示：

<script setup>
const props = defineProps({
  imagePath: { type: String },
})
</script>

<template>
  <img :src="require(`@/assets/${props.imagePath}`)"/>
</template>

我尝试过的

我已经尝试使用相对路径直接从资产文件夹导入文件，并且它有效。但我无法使用 …

Nuxt 3 第一个候选版本即将推出，所以我正在使用 Nuxt 3 开始一个全新的项目。我已经面临一个常见的问题，我正想问如何解决它。但我自己做到了，所以我提出了一个自我回答的问题，以帮助将来可能面临同样问题的人。

如何在我的 vue 组件中使用全局 Sass（或 Scss）变量？我在其他帖子中看到我们可以使用该@nuxtjs/style-resources包，但它看起来像是 Nuxt 2 包。我认为在 Nuxt 3 中可能有更好的方法来做到这一点，而无需添加style-resources像?这样的依赖项。

我所说的“全局变量”是 SASS 变量，是指我希望能够在任何 Vue 组件中使用 SASS 变量，而不必包含 SASS 文件。

我想要的是

（鉴于我已经安装了该sass软件包）

// @/assets/style/main.sass
$grey-bg: #CCC
$light-blue: #c6d8f5

<!-- app.vue -->
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<style lang="sass">
body
  background-color: $grey-bg
  color: $light-blue
</style>

我已经尝试过的

我尝试将我的 sass 文件包含在Nuxt 配置 CSS属性中，如下所示：

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    css: ["@/assets/style/global.sass"]
}) …