Nuxt3配置style-resources报resolver.resolveModule is not a function问题问询

报错原因 #

你当前使用的@nuxtjs/style-resources@1.2.1仅适配Nuxt 2，未兼容Nuxt 3的底层API，所以启动时会抛出resolver.resolveModule is not a function的错误，目前该模块尚未发布适配Nuxt 3的稳定版本，无需继续调试原有配置。

可行解决方案 #

Nuxt 3默认基于Vite构建，直接通过Vite的预处理器配置即可实现全局样式资源注入，无需额外安装第三方模块：

步骤1：卸载无效依赖 #

npm uninstall @nuxtjs/style-resources
# 或用yarn
yarn remove @nuxtjs/style-resources
# 或用pnpm
pnpm remove @nuxtjs/style-resources

步骤2：修改nuxt.config.js配置 #

删除原有buildModules和styleResources配置项，新增Vite预处理器配置即可：

export default defineNuxtConfig({
  css: ['~/assets/main.scss'],
  // 新增Vite配置
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 全局注入变量文件，多个文件可多写几行@use语句
          additionalData: '@use "~/assets/variables.scss" as *;'
          // 若你习惯使用旧版@import语法，可替换为：
          // additionalData: '@import "~/assets/variables.scss";'
        }
      }
    }
  }
})

特殊情况：使用Webpack构建的配置 #

如果你手动切换了Nuxt 3的构建工具为Webpack，用以下配置代替即可：

export default defineNuxtConfig({
  css: ['~/assets/main.scss'],
  build: {
    webpack: {
      loaders: {
        scss: {
          additionalData: '@use "~/assets/variables.scss" as *;'
        }
      }
    }
  }
})

配置完成后重启项目，所有组件内无需单独导入即可直接使用variables.scss中定义的变量、mixin等样式资源。

内容的提问来源于stack exchange，提问作者Freestyle09