如何在Nuxt 3的defineNuxtModule中配置全局Sass变量供组件使用？

你之前的代码无法生效，核心原因是Nuxt 3模块不能直接在顶层定义build配置，必须通过模块的钩子（hooks）来修改底层Vite或Webpack的构建配置。以下是可行的实现方案：

核心思路 #

Nuxt 3默认使用Vite作为构建工具，需通过vite:extend钩子修改Vite的CSS预处理器配置；若需兼容Webpack，则额外处理webpack:config钩子。同时要注意：模块内的文件需使用绝对路径，避免别名解析错误。

完整模块代码示例 #

import { defineNuxtModule } from '@nuxt/kit'
import { resolve } from 'path'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-global-sass',
    configKey: 'globalSass'
  },
  setup(_options, nuxt) {
    // 配置Vite构建下的全局Sass变量
    nuxt.hooks.hook('vite:extend', (viteConfig) => {
      // 初始化CSS配置项
      viteConfig.css = viteConfig.css || {}
      viteConfig.css.preprocessorOptions = viteConfig.css.preprocessorOptions || {}

      // 注入全局Sass变量（替换为你模块内的变量文件路径）
      viteConfig.css.preprocessorOptions.scss = {
        additionalData: `@import "${resolve(__dirname, './assets/scss/variables.scss')}";`
      }
    })

    // 兼容Webpack构建的情况（可选）
    nuxt.hooks.hook('webpack:config', (webpackConfigs) => {
      webpackConfigs.forEach(config => {
        const scssRule = config.module?.rules?.find(rule => rule.test?.test('.scss'))
        if (!scssRule) return

        scssRule.use?.forEach((useItem: any) => {
          if (useItem.loader?.includes('sass-loader')) {
            useItem.options = useItem.options || {}
            useItem.options.additionalData = `@import "${resolve(__dirname, './assets/scss/variables.scss')}";`
          }
        })
      })
    })
  }
})

关键细节说明 #

1. 路径处理：使用resolve(__dirname, 文件路径)获取模块内Sass文件的绝对路径，避免项目别名（如@/）无法解析模块内部文件的问题。
2. 钩子使用：通过vite:extend和webpack:config钩子分别对应Vite和Webpack构建工具，确保不同环境下配置都能生效。
3. 配置初始化：先初始化CSS和预处理器的配置对象，避免覆盖项目已有的其他CSS配置。

如果你的全局Sass变量是项目根目录下的文件（而非模块内），可替换路径为：

const variablesPath = await nuxt.resolver.resolvePath('@/assets/scss/variables.scss')
additionalData = `@import "${variablesPath}";`

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