在Nuxt 3模块组件中使用Sass执行nuxt-module-build报错求助

我正在开发UI库并将其封装为Nuxt模块，组件中使用了Sass。执行nuxt-module-build时出现报错，错误信息为：

src/runtime/components/Button.vue.sass 111:36  root stylesheet

已在依赖中安装Sass及loader，模块setup代码如下：

async setup (options, nuxt) {
  const resolver = createResolver(import.meta.url)

  await addComponentsDir({
    path: resolver.resolve('./runtime/components'),
    pathPrefix: false,
    prefix: 'Simple',
    global: true
  })
}

同时已将相关文件添加至nuxt.options.css：

nuxt.options.css.push(resolver.resolve('./runtime/components/buttons', 'Button.vue'));
nuxt.options.css.push(resolver.resolve('./runtime/components/buttons', 'Button.vue.sass'));

但仍无法解决报错问题。

• 移除错误的CSS路径配置：nuxt.options.css数组仅用于引入纯样式文件，无需添加Button.vue组件文件，直接删除这一行：

  nuxt.options.css.push(resolver.resolve('./runtime/components/buttons', 'Button.vue'));
  

• 排查Sass语法错误：报错明确指向Button.vue.sass的111行36位，重点检查该行：

  • 变量名、属性名是否拼写错误
  • 嵌套规则是否正确闭合
  • 是否使用了未定义的混合宏、函数
  • 有无非法字符或格式混乱

• 调整样式引入逻辑：如果Button.vue已经通过<style lang="sass">标签引入了.sass文件，就不需要再单独把Button.vue.sass添加到nuxt.options.css，避免重复加载引发解析问题。组件内正确引入方式示例：

  <template>...</template>
  <script>...</script>
  <style lang="sass">
  @import './Button.vue.sass'
  </style>
  

• 优化依赖配置：作为Nuxt模块，建议将sass设为peerDependency，让用户自行安装对应版本，避免版本冲突；无需手动配置Sass loader，Nuxt会自动处理。

• 清理缓存后重建：执行以下命令清理缓存再尝试构建：

  npx nuxt clean
  nuxt-module-build
  

内容的提问来源于stack exchange，提问作者Максим Нивейкин