Глобальный импорт и использование Sass - статические активы Nuxt 3

Question

Я пытаюсь импортировать глобальную таблицу стилей Sass из /assetsкаталог и использовать такие вещи, как переменные и миксины, определенные там во всех компонентах. Мой nuxt.config.ts в настоящее время выглядит так:

      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"], // This throws error
    vite: {
        css: {
            loaderOptions: {
                sass: {
                    additionalData: ` @import "@/assets/styles/main.sass"; `,
                },
            },
        },
    },
});

Когда я сейчас пытаюсь использовать переменную, я получаю [plugin:vite:css] Undefined variable.ошибка. Раньше это очень хорошо работало в Nuxt 2 с @nuxtjs/style-resources но я не уверен, как заставить это работать в Nuxt 3.

Однако классы и применяемые стили из этой таблицы стилей работают, недоступны только переменные, миксины и карты.

Может кто-нибудь помочь?

Answer 1

Итак, это решение сработало после того, как некоторое время поиграл

      import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    vite: {
        css: {
            preprocessorOptions: {
                sass: {
                    additionalData: '@import "@/assets/styles/_variables.sass"',
                },
            },
        },
    },
});

Здесь,

• main.sassсодержит классы и стили
• содержит миксины, переменные, карты и т. д.

Обратите внимание, что в _variables.sass, вам нужно иметь пустую строку в начале файла, чтобы избежать ошибки. Это проблема, с которой мы сталкиваемся в данный момент, и, надеюсь, она скоро будет решена.

Answer 2

Я использую Nuxt 3 с настройкой TS, и сегодня 16 февраля 2023 года в США. Попробовав множество различных вариантов, я не смог бы работать без точки с запятой в конце _variables.scss, хотя я согласен с Хуаном, что первая строка импорта {defineNuxtConfig} из nuxt3 не нужна.

          // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: "en" },
    },
  },
  css: ["@/assets/styles/main.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/styles/_variables.scss";',
        },
      },
    },
  },
});

Изображение моей IDE и сообщений терминала

Answer 3

Думаю, мне нужно больше репутации, чтобы комментировать, но работает ли это для других? Я получаю сообщение об ошибке:

      [plugin:vite:css] expected newline.
  ╷
1 │ @import "@/assets/styles/_variables.sass"$foo: green
  │                                          ^
  ╵
  assets/styles/main.sass 1:42  root stylesheet

Answer 4

Не обязательно импортdefineNuxtConfig

Это работает для меня:

      // nuxt.config.ts
export default {
  css: ['@/static/assets/scss/base.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/style/global.sass";'
        }
      }
    }
  }
};