nuxt3中配置全局样式和全局变量

嗨嗨嗨~

我比较习惯 less ， 不过 sass ,scss 也一样吧！

记得提前安装对应的 loader

yarn add less less-loader

loader 安装完不用配置。超酷的好吧

全局样式

nuxt 的 配置文件就有一个 css 配置 ，可以配置全局样式 hello nuxt3 | Nuxt 3 - 中文文档 (nuxtjs.org.cn)

export default {
  alias: {
    "@": "./"
  },
  css: [
    "@/assets/style/global.less"
  ]
}

不过全局变量它就束手无策了。

全局变量

nuxt2 可以使用 @nuxtjs/style-resources ：@nuxtjs/style-resources - npm (npmjs.com)

nuxt3 就不支持了。毕竟上一次更新还是两年前呢！

nuxt3可以尝试：

export default {
  alias: {
    "@": "./"
  },
  vite: {
    css: {
      preprocessorOptions: {
        less: {
          additionalData: '@import     
          "@/assets/style/vars.less";',
        },
      },
    },
  }
}

nuxt3 支持了部分 vite 的配置。 Common Issues (nuxtjs.org)

参考了： nuxt3: resolver.resolveModule is not a function · Issue #190 · nuxt-community/style-resources-module (github.com)