如何在Nuxt3中应用SASS变量

Question

浏览器中出现以下错误：

[plugin:vite:css] [sass] Undefined variable.

我从 nuxt.config.ts 中删除了 preprocessorOptions，这导致了错误的发生。但是，我只添加了应用程序的 SASS 变量，并且我不想使用像

vite.css.preprocessorOptions.scss.additionalData.

这样又长又复杂的选项。如果有其他方法可以实现此目的，请告诉我。

import vuetify from 'vite-plugin-vuetify';
import fs from 'fs';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxtjs/i18n',
    [
      '@nuxtjs/algolia',
      {
        ALGOLIA_INDEX_NAME: process.env.ALGOLIA_INDEX_NAME || '',
        apiKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY,
        applicationId: process.env.ALGOLIA_APPLICATION_ID,
        instantSearch: {
          theme: 'algolia',
        },
      },
    ],
  ],
  content: {
    highlight: {
      // コードハイライトを有効化する場合はテーマを設定
      theme: 'github-dark-dimmed',
    },
    documentDriven: true,
  },
  i18n: {
    // lazy: true,
    locales: [
      { code: 'en', file: 'en.json', name: 'English' },
      { code: 'ja', file: 'ja.json', name: 'Japanese' },
    ],
    defaultLocale: 'ja',
    langDir: 'lang/',
    strategy: 'no_prefix',
  },

  nitro: {
    prerender: {
      routes: [
        '/',
        '/ja/',
        '/en/',
        '/ja/getting-started/introduction/',
        '/ja/getting-started/installation/',
        '/en/getting-started/introduction/',
        '/en/getting-started/installation/',
      ],
    },
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      link: [
        // どの言語にも一致しない場合の代替ページ
        // {
        //   rel: 'x-default',
        //   href: `${process.env.NUXT_BASE_URL}/en/`,
        // },
        // {
        //   rel: 'alternate',
        //   hreflang: 'ja',
        //   href: `${process.env.NUXT_BASE_URL}/ja/`,
        // },
        // {
        //   rel: 'alternate',
        //   hreflang: 'en',
        //   href: `${process.env.NUXT_BASE_URL}/en/`,
        // },
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com',
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: '',
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Inconsolata:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap',
          onload: 'this.onload=null;this.rel="stylesheet"',
        },
      ],
    },
  },
  css: ['assets/main.scss'],
  build: {
    transpile: ['vuetify'],
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(
        vuetify({
          autoImport: true,
          styles: {
            configFile: 'assets/vuetify-settings.scss',
          },
        })
      );
    },
  },
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_BASE_URL,
    },
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/variables.scss" as *;',
        },
      },
    },
    ssr: {
      noExternal: ['vuetify'],
    },
    define: {
      'process.env.DEBUG': false,
    },
  },
  extends: [],
  // ssr: false,
});

我正在寻找一种更简单的方法来应用 SASS 变量而不会导致此错误。

目前，我已将

./variables.scss

导入到

assets/main.scss

中，如下所示：

code,
kbd,
pre,
samp {
  font-family: 'Inconsolata', 'Noto Sans JP', monospace;
}

@import './variables.scss';

复制存储库：https://github.com/newyee/nuxt-site

Answer 1

我已经确认使用

additionalData

的方法对于应用SCSS是正确的，正如官方文档中记录的那样：

https://nuxt.com/docs/getting-started/styling。