homusuke
@homusuke (がみん)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

3Answer

Webpackでeotファイルを読み込むための設定をする必要がありそうです。
file-loaderが利用できるのではないでしょうか。

1Like

Comments

  1. @homusuke

    Questioner

    loader周りを変更したらできました。ありがとうございます🙏

私のやり方ですが簡単なのは下記のように、
App.vueにscopedを外したstyleタグを置きそこで呼ぶ方法です。

<style lang="scss">
@import "./assets/scss/index.scss";
</style>
1Like

Comments

  1. @homusuke

    Questioner

    ありがとうございます!
    本題とはそれますが、templateでstyleタグを二つ配置する、という発想がなかったので勉強になりました🙏

Comments

  1. @homusuke

    Questioner

    コメントありがとうございます🙏

Your answer might help someone💌