1.在Nuxt导入样式文件的方式
在nuxt中，支持两种样式文件导入的配置。如下：
- 通过配置文件的
css属性指定文件路径。该属性可以支持一个字符串数组，每一项为一个样式文件路径。例如：
export default defineNuxtConfig({compatibilityDate: '2024-11-01',// css样式的引入css: ['~/assets/base.scss', '~/assets/common.scss'],})注意: 这种方式只支持简单的样式文件引入，且在导入less, sass等样式文件时需要单独单张对应的npm包。如果样式文件中使用变量，则使用这种方式导入时变量不会生效。
- 通过在
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文件，并自动导入。
