如何在 NuxtJS 的 nuxt.config.js 中导入自定义 css 文件？

【问题标题】：How to import custom css file in nuxt.config.js in NuxtJS?如何在 NuxtJS 的 nuxt.config.js 中导入自定义 css 文件？
【发布时间】：2021-01-20 08:09:56
【问题描述】：

我正在尝试将一个 css 文件导入 Nuxt，但我无法将背景颜色更改为红色。

我在这里添加了一个css文件的文件夹

assets/css/main.css

在 main.css 文件中，我有以下要测试的文本。

body {
    background-color: coral;
}

nuxt.config.js：

export default {
  css: [

    // Material Design Icons
    '@mdi/font/css/materialdesignicons.min.css',

    // Main style sheet
    '@/assets/css/main.css'
  ],
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) { }
  },
  buildModules: [
    // Simple usage
    //'@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
  ]
}

【问题讨论】：

标签： nuxt.js vuetify.js

【解决方案1】：

body {
  background-color: coral;
}

将被 vuetify 的默认设置覆盖。要使背景颜色起作用，您需要在 vuetify 下进行设置。

您可以通过在文件variables.scss 中添加以下行来做到这一点。

#app {
    background-color: coral;
  }

在哪里进行此更改：当您生成 vuetify nuxt 应用程序时，将在 assets 下生成名为 variables.scss 的 scss 文件。如果没有这样的文件，则添加它并更新css，如上所示。

然后你需要在 nuxt 配置中包含相同的内容

css: ['@/assets/variables.scss'],

【讨论】：