web-dev-qa-db-ja.com

nuxt.jsのAssetsフォルダからCSSファイルをインポートする方法

<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を読み込む他の方法は本当にありませんか？

cssvue.jsnuxt.js
4
obliviousfella

あなたが知る必要がある最初のことは、あなたがあなたのタムプレートではあなたのタムプレートでもHTMLヘッドを宣言することはできません。

正しい場所はnuxt.config.jsの内側にあるこのファイルの内側に、あなたはヘッドと呼ばれるプロパティを持っていて、このヘッドの中にあなたがあなたのインポートを設定します。もう1つのことは、これにHTMLタグを使用しないことです.JSONスキーマを使用します。

探してください https://nuxtjs.org/guide/configuration 詳細については説明しています。

今すぐあなたのCSSをグローバルにインポートする必要がある場合は、Nuxt.config.js内のCSSという新しいプロパティを宣言できます。

...  
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ローダーも必要になりますので、アプリ内の "stylus"と "stylus-loader"を黙っていました。

0
Henrique Van Klaveren

そのようなヘッドメソッドの使用にファイルを持参することができます。

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

}

これらのCSSファイルを静的フォルダに移動する必要があります。 Vueフォーラム https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/ja.js-js-file/42498

0
MailboxArsonist