将 Nuxt 配置为按路由或页面包含 CSS，而不是全局

Question

Nuxt 文档中有including CSS globally 的说明，非常有帮助。如果有一种方法可以为某些路由包含 .scss 文件，那也会很有帮助。

例如，有没有办法将new.scss 包含在所有路由/new/* 和old.scss 用于所有路由/old/*？或者只是在整个页面上包含 CSS，例如/new 不一定是它的所有孩子。这也能达到我的目的。

我最初认为这将通过 nuxt.config.js 完成，但也许这可以在页面本身的实际 .vue 文件中完成。

Answer 1

Nuxt 使用 vue-meta，因此您可以像这样在单个页面上包含 CSS：

// inside your page
export default {
  head () {
    return {
      meta: {
        link: [
          { rel: 'stylesheet', href: '/css/new.css' },
        ]
      }
    }
  }
}

既然是函数，让它动态/per-route应该没问题

// inside your page
export default {
  head () {
    if($route.path.includes('/old/')) {
      return {
        meta: {
          link: [
            { rel: 'stylesheet', href: '/css/old.css' },
          ]
        }
      }
  }
}

您也可以将其提取到mixin 中并轻松将其应用于多个页面......

Answer 2

执行此操作的一种方法是将 CSS 导入页面的 Vue 组件的（非范围）style 部分。例如，在pages/old/index.vue 中，您可以拥有以下内容

<style>
@import '~/assets/scss/old.css';
</style>

再次注意，这里的样式标签没有作用域。这是完成这项工作的关键，因为scoped styles 将不适用于子元素（子组件的根元素除外）。

Answer 3

另一种使用不同layout 并在每个文件上添加各种css 文件的干净方式。所以不同布局的页面可以有不同的风格。