es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Importación y uso global de Sass – Activos estáticos de Nuxt 3

31 Jul, 2023 Programación

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?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Importa tu archivo Sass en el archivo nuxt.config.ts utilizando la opción additionalData en el objeto vite:
    vite: {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/main.sass";`,
      },
    },
  },
},
    1. Para evitar el error [plugin:vite:css] Undefined variable., debes usar sass en lugar de css en el objeto vite. Esto se debe a que el objeto css solo es un respaldo para preprocesadores de CSS, y Nuxt 3 utiliza Sass de forma predeterminada.

    2. Luego puedes utilizar tus variables y mixins de Sass en los estilos o plantillas de tus componentes como de costumbre:

    <template>
  <div class="container">
    <h1 class="title">{{ title }}</h1>
  </div>
</template>

<style lang="scss">
.container {
  background-color: $primary-color;
}

.title {
  font-family: $title-font;
  color: $secondary-color;
}
</style>

    Ten en cuenta que ya no es necesario utilizar la opción styleResources en Nuxt 3, ya que importar el archivo Sass en el objeto vite es suficiente para hacer que las variables y mixins sean globales.

Comments are closed.