Как импортировать css файл из папки активов в nuxt. js - PullRequest
Новая
       10

Как импортировать css файл из папки активов в nuxt. js

0 голосов
/ 18 февраля 2020 
<template>
  <div class="container">
    <head>
      <link rel="stylesheet" href="~assets/css/style-light.css" />
      <link rel="stylesheet" href="~assets/css/login-light.css" />
    </head>
  </div>
</template>

Импорт css, как указано выше, приводит к этой ошибке 

vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)

Неужели нет другого способа загрузки css, кроме помещения всего css в шаблон?

Ответы [ 3 ]

0 голосов
/ 18 февраля 2020

Вы можете перенести ваши файлы, используя метод head следующим образом: 

head () {
return {
  link: [
    { rel: 'stylesheet', href: '/style-light.css' },
    { rel: 'stylesheet', href: '/login-light.css' }
  ]
}

}

Вы также должны переместить эти css файлы в папку stati c. Смотрите это обсуждение на форуме Vue https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498

0 голосов
/ 18 февраля 2020

Первое, что вам нужно знать, это то, что вы не можете объявить голову html ни в каком месте, ни в своем шаблоне, ни в своих компонентах, ни на своих страницах, ни в никуда.

Правильное место находится внутри вашего nuxt.config. js, внутри этого файла у вас есть свойство с именем head, и внутри этого заголовка вы будете настраивать импорт. Другое дело, что вы не используете для этого теги html, вы будете использовать схему json.

. Для более подробных объяснений посмотрите https://nuxtjs.org/guide/configuration.

Теперь о ваших сомнениях: если вам нужно импортировать CSS как глобально, вы можете объявить новое свойство с именем css внутри вашего nuxt.config. js, что-то вроде этого: 

...  
css: [
  '~/assets/style/app.styl',
  '~/assets/style/main.css'
],
...

Другой способ - импортировать ваш css непосредственно в ваш компонент, для этого вы можете сделать что-то вроде этого: 

    <style scoped>
    @import '~/assets/style/main.css';
    </style>
OR
    <style scoped src="@/assets/styles/mystyles.css">
    </style>

В Nuxt вам понадобится установленный загрузчик CSS в вашем приложении, так что убедитесь, что вы установили «стилус» и «стилус-загрузчик» в вашем приложении.

0 голосов
/ 18 февраля 2020

попробуйте внедрить ваши css файлы в скрипт следующим образом: 

<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";

/// 

</script>

РЕДАКТИРОВАТЬ: изменено ~ на @

...