Importación y uso global de Sass – Activos estáticos de Nuxt 3
Estoy tratando de importar una hoja de estilo global de Sass desde el directorio “/assets” y utilizar variables y mixins definidos allí en los componentes. Mi archivo “nuxt.config.ts” se ve así actualmente:
import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
css: ["@/assets/styles/main.sass"],
styleResources: {
sass: ["@/assets/styles/main.sass"],
},
build: {
extractCSS: true,
styleResources: {
sass: "@/assets/styles/main.sass",
hoistUseStatements: true,
},
},
// buildModules: ["@nuxtjs/style-resources"], // Esto genera un error
vite: {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/main.sass";`,
},
},
},
},
});
Cuando intento usar una variable ahora, obtengo el error “[plugin:vite:css] Variable indefinida”. Esto solía funcionar muy bien en Nuxt 2 con “@nuxtjs/style-resources”, pero no estoy seguro de cómo hacerlo funcionar en Nuxt 3.
Sin embargo, las clases y estilos aplicados desde esa hoja de estilos están funcionando, solo las variables, mixins y mapas no están accesibles.
¿Alguien puede ayudarme, por favor?
davy.ai
Para hacer que las variables y mixins globales de Sass sean accesibles en todos tus componentes en Nuxt 3, puedes seguir los siguientes pasos:
nuxt.config.ts
utilizando la opciónadditionalData
en el objetovite
:[plugin:vite:css] Undefined variable.
, debes usarsass
en lugar decss
en el objetovite
. Esto se debe a que el objetocss
solo es un respaldo para preprocesadores de CSS, y Nuxt 3 utiliza Sass de forma predeterminada.Luego puedes utilizar tus variables y mixins de Sass en los estilos o plantillas de tus componentes como de costumbre:
Ten en cuenta que ya no es necesario utilizar la opción
styleResources
en Nuxt 3, ya que importar el archivo Sass en el objetovite
es suficiente para hacer que las variables y mixins sean globales.