Nuxt如何覆盖页面的全局css答案

【问题标题】：Nuxt how to override global css for a pageNuxt如何覆盖页面的全局css
【发布时间】：2021-01-21 13:01:12
【问题描述】：

我有一个具有多个布局的项目，我在nuxt.config.js 文件中全局添加了 CSS，如下所示：

  css: [
    '@/assets/plugins/fontawesome-free/css/all.min.css',
    '@/assets/plugins/ionicons/css/ionicons.min.css',
    '@/assets/plugins/feather/feather.css',
    '@/assets/css/style.css',
    '@/assets/css/custom-style.css',
    '@/assets/css/skins.css',
  ]

但我只想要 1 个布局来删除所有导入的 css，因为正在提供的文件是一个静态 HTML 文件，所有样式都内联。

这在 nuxt 中是否可行，如果不可行，最好的解决方法是什么？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

您可以在布局中以普通样式块而不是在 nuxt.config.js 中添加 css 文件。

<style lang="scss">
@import ...;
</style>

然后你可以使用没有这些 css 文件的其他布局。

【讨论】：

但是这样我将不得不编辑所有布局并在除了 1 之外的所有布局中添加导入。我认为有一种简单的方法可以告诉 nuxt 从这个 1 布局中删除所有导入。
我只是猜测，但由于 nuxt.conf.js 是全球性的，我认为这是不可能的。您可以在一个 scss 中添加文件的所有导入，然后只导入这个而不是许多 CSS。

【解决方案2】：

从 .vue 文件中的样式中删除要覆盖全局样式的范围：

 <style s̶c̶o̶p̶e̶d̶>
.ProseMirror p {
  color: rgb(236, 10, 10);
}
</style>

我也想知道，如果您最好在布局文件夹中创建新的 vue 布局文件并将这些样式应用到您想要全局影响的页面，而不是通过 nuxt.config.js 文件拉取 css。然后，在您要覆盖全局样式的特定页面上，只需删除我上面提到的范围。只是一个想法。

【讨论】：