web-dev-qa-db-ja.com

Vue 2にcssファイルを含める方法

私はvue jsを初めて使い、これを学ぼうとしています。システムにvue webpackの新しいバージョンをインストールしました。私はこのテンプレートのCSS、JS、および画像をHTMLに含めたいので、index.htmlに追加しようとしましたが、コンソールでエラーが表示され、アセットが追加されていません。検索中に、main.jsファイルでrequireを使用できることを知りました。しかし、私はエラーが発生しています：

次のmain.jsファイルで試しました：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 require('./assets/styles/vendor.css');
 require('./assets/styles/main.css');
 require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

インポートを使用して使用しようとしましたが、それでもエラーが発生しました

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 import('./assets/styles/vendor.css')
 // require('./assets/styles/vendor.css');
 // require('./assets/styles/main.css');
 // require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

エラーのスクリーンショットは次のとおりです。 Error message

これで私を助けてください。

webpackvue.jsvuejs2webpack-dev-server
22
Nitish Kumar

スタイルタグ内のApp.vueでcssファイルをインポートできます。

<style>
  @import './assets/styles/yourstyles.css';
</style>

また、必要な場合は、正しいローダーがインストールされていることを確認してください。

52
Geraldine Golong

URL文字列の前に@記号を使用してみてください。次の方法でCSSをインポートします。

import Vue from 'vue'

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

App.vueファイルで、これを実行してスタイルタグでcssファイルをインポートできます。

<template>
  <div>
  </div>
</template>

<style scoped src="@/assets/styles/mystyles.css">
</style>
9
Sir Waithaka

ご覧のとおり、importコマンドは機能しましたが、vendor.cssでリソースを見つけようとして見つからなかったため、エラーが表示されています。

また、プロジェクト構造をアップロードし、パスの問題がないことを確認する必要があります。また、cssファイルをindex.htmlに含めることができます。または、コンポーネントテンプレートとwebpackローダーがビルド時にそれを抽出します

0
iamareebjamal