Можно ли условно импортировать файл css в Vue.js?

Question

У меня есть моя админ-панель и страницы для клиентов в одном Vue.js project.Можно ли использовать определенный css-files, только если текущий маршрут имеет "forAdmin" мета?

Answer 1

В вашей функции mounted() вы можете добавить ее следующим образом.

if(someCondition) {
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
    element.setAttribute("href", "external.css");
    document.getElementsByTagName("head")[0].appendChild(element);
}

Answer 2

Используя style-loader с применимым API, вы можете динамически применять и удалять таблицу стилей в своем коде.

Сначала вам нужно обновить правила конфигурации вашего веб-пакета, чтобытаблицы стилей с расширением .useable.css будут загружены с помощью применимого API:

{
  test: /\.css$/,
  exclude: /\.useable.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
},
{
  test: /\.useable\.css$/,
  use: [
    'style-loader/useable',
    'css-loader'
  ]
}

Теперь в вашем файле кода маршрутизатора вы можете импортировать свою таблицу стилей и .use() и .unuse()это в соответствии с вашими условиями:

import style from './admin.useable.css'

const router = new VueRouter(...)

router.afterEach((to, from) => {
  for (const route of to.matched) {
    if (route.meta.forAdmin) {
      style.use()
    }
  }

  for (const route of from.matched) {
    if (route.meta.forAdmin) {
      style.unuse()
    }
  }
})

Убедитесь, что вы правильно уравняли общее количество вызовов .use() и .unuse(), потому что за сценой ведется подсчет ссылок, чтобы выяснить, когда следует применять таблицу стилей.

Я не уверен, каковы ваши настройки, так что, возможно, есть лучший способ сделать то, что вы хотите.

Answer 3

Чтобы включить css файл в components, вы можете использовать следующее - Теперь он находится в разделе JS, вы можете проверить и добавить его, используя if

https://codesandbox.io/s/vue-template-fedn4

<script>

require('./assets/css/main.css')

</script>