はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Vue.js】Elementを導入したときにエラーがいっぱいでた話

はじめに

Vue.jsにElementを導入したときにつまづいたことを書いておきたいと思います。

エラー その1

Module parse failed: Unexpected character '' (1:0)

というようなエラーがでてきました。

対処法
{ test: /\.css$/, loader: 'style-loader!css-loader' },

webpack.config.jsのloadersに追加すれば大丈夫でした。

WebPack + Vueで、「Element」導入時にハマった点 - Qiita

エラー その2

Error: Can't resolve 'style-loader' in '~'

というエラーが次にでてきました。

対処法
npm install style-loader --save-dev

コマンドプロンプト等で打ち込んでください。

webpack - Module not found: Error: Can't resolve 'style-loader' - reactjs - Stack Overflow

エラー その3

Module build failed: Unknown word (2:1)

まだまだエラーは続きます。

対処法
npm install url-loader

コマンドプロンプトで打ち込んだ後、

{
  test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
  loader: 'url-loader'
},

をwebpack.config.jsのloadersに追加します。

そして、webpack.config.jsの上に書いてある

      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },

という箇所を削除をしてしまってください。

WebPack + Vueで、「Element」導入時にハマった点 - Qiita

その後・・・

以上の操作をしたところ、

f:id:hanaaaaaachiru:20181211230810p:plain


いつものが表示できました!

さいごに

私の知識不足がかなり原因かもしれませんが、かなり導入に苦労をしてしまいました。
ぜひ同じように悩んでいるかたの参考に少しでもなれば幸いです!