Nuxt样式文件导入

1.在Nuxt导入样式文件的方式

在nuxt中，支持两种样式文件导入的配置。如下：

1. 通过配置文件的css属性指定文件路径。该属性可以支持一个字符串数组，每一项为一个样式文件路径。例如：

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  
  // css样式的引入
  css: ['~/assets/base.scss', '~/assets/common.scss'],
  
})

注意: 这种方式只支持简单的样式文件引入，且在导入less, sass等样式文件时需要单独单张对应的npm包。如果样式文件中使用变量，则使用这种方式导入时变量不会生效。

2. 通过在nuxt中配置vite资源导入的配置来导入样式文件。例如：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  // css样式的引入
  css: ['~/assets/base.scss'], // 简单引入样式，不引入变量，如果需要引入变量，需要使用vite的配置文件
  // vite配置文件
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/base.scss" as *;'
        }
      }
    }
  },

})

注意: 这两种方式不可同时导入统一文件，否则会报错。

2.Vite样式文件导入的问题

在使用Vite的配置导入样式文件时，我遇到了一个问题： 在项目中配置了scss文件导入，但启动项目之后未生效。

注意：在使用这种方式导入scss等文件时，如果在页面中没有使用style lang="scss"标签，则vite导入的样式文件将不会生效。一但项目中某个vue文件使用了style lang="scss"标签，vite在启动时就会自动去寻找scss文件，并自动导入。