Vue 2にCSSファイルを含める方法 質問する

Vue 2にCSSファイルを含める方法 質問する

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

私のファイルでは次のことを試しました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 }
 })

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

この件について私を助けてください。

ベストアンサー1

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

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

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

おすすめ記事