配置 Nuxt 以通过路由或页面包含 CSS，而不是全局包含 CSS

Question

Nuxt 文档有关于全局包含 CSS 的说明，这非常有帮助。.scss如果有一种方法可以只包含某些路由的文件，那也会很有帮助。

例如，有没有一种方法可以包含new.scss所有路线/new/*和old.scss所有路线/old/*？或者只是将 CSS 包含在整个页面上，例如/new，而不一定包含其所有子页面。这样也能达到我的目的了。

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

Answer 1

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

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

再次注意，这里的样式标签没有作用域。这是使其工作的关键，因为作用域样式不会应用于子元素（子组件的根元素除外）。

Answer 2

Nuxt 使用vue-meta，因此您可以在单个页面上包含 CSS，如下所示：

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

既然是一个函数，那么将其设为动态/每条路由应该没有问题

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

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