Vue.jsのmain.jsでcssファイルを読み込みたい
解決したいこと
Vue-CLI + webpackで、外部CSSファイルをmain.jsで読み込みたいです。
scoped CSSを利用してSPAを作っています。
その中で、グローバルなCSSを設定したく、main.jsにグローバルなcssファイルを設定。
ビルドした結果エラーが発生しました。
解決策が見つからず、この場をお借りします。
発生している問題・エラー
ERROR in ./src/assets/hoge.css
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../font/shinecaption.eot?' in hope.css
該当するソースコード
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import mainCSS from './assets/hoge.css'//読み込みたいcssファイル
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
mainCSS,//追加
})
環境構築
Vueの作成
npm install -g vue-cli
vue init webpack my-app
npm run build
tree
src
├── App.vue
├── assets
│ ├── logo.png
│ └── hoge.css//外部css
├── components
│ └── HelloWorld.vue
├── main.js
└── router
└── index.js
0
