Настройте Nuxt для включения CSS по маршруту или странице, а не глобально

Question

В документации Nuxt есть инструкции для , включая CSS глобально , что весьма полезно. Также было бы полезно, если бы был способ включить файл .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' },
        ]
      }
    }
  }
}

Поскольку это функция, с ней проблем не должно быть чтобы сделать его динамическим / для каждого маршрута

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

Вы также можете извлечь его в mixin и легко применить к нескольким страницам ....

Answer 2

Один из способов сделать это - просто импортировать ваш CSS в (не ограниченный) раздел style компонента Vue для вашей страницы. Например, в пределах pages/old/index.vue вы можете иметь следующее:

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

Обратите внимание, опять же, что тег стиля здесь не ограничен. Это ключ к выполнению этой работы, поскольку стили с областью действия не будут применяться к дочерним элементам (за исключением элемента root дочернего компонента).