Vuetify導入のためLaravel Mixにcss-loaderを入れるとコンパイルエラーになる。

Question

前提・実現したいこと

LaravelでVue.jsを使用しています。vuetifyの導入を考えています。
Vuetifyのドキュメントにcss-loaderが必要だと記載があり、yarn add css-loader -Dで導入をしました。
すると、以下のエラーが発生します。
yarn remove css-loaderで削除するとnot foundのエラーもなくなってCompiled successfullyとなりvueの表示もできます。
原因はcss-loaderでパスの指定方法等の問題ではないと考えています。

発生している問題・エラーメッセージ

ERROR  Failed to compile with 8 errors                                                               
These relative modules were not found:

該当のソースコード

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@mdi/font": "^3.5.94",
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.21"
    },
    "dependencies": {
        "eslint": "^5.12.1",
        "material-design-icons-iconfont": "^4.0.5",
        "switch-php": "^1.1.3",
        "vee-validate": "^2.1.5",
        "vue-router": "^3.0.2",
        "vuetify": "^1.5.1"
    }
}

試していること

現在は、css-loaderが原因と考えてcss-loaderの動きやsass-loaderとの衝突等の方向性で調べています。
vuetifyは一部分は導入できたのですが、スタイル崩れやmdiのアイコンが反映されないのでやはりcss-loaderが必要だと考えています。

・css-loader導入時にwarningでwebpackないことを指摘されていたので、yarn add webpackしましたがコンパイルエラーになりyarn remove webpackしてコンパイルが再度通るようになりました。

###教えて欲しいこと
最終的にはvuetifyを使用できれば良いです。
vuetifyにcss-loaderは不要だとか、何か代替案や近い症状で解決した例があれば助かります。
また、どのファイルが必要かも判っていないので必要なファイル等があれば教えてください。

Answer 1

#Vuetifyの表示エラー
vuetify自体がレンダリングされなかったエラーに関しては、
[Vuetify] Multiple instances of Vue detected
If you're seeing "$attrs is readonly", it's caused by thisのエラーがあり、もともと使用していたwindow.Vue = require('vue');と新たに追加したimport Vue from 'vue'と衝突していたために表示できていなかった。らしい。
window.Vueの方を削除してレンダリングされるようになった。

#スタイル崩れ
これはstylus stylus-loaderが足りなかったようで、yarn add stylus stylus-louderでスタイル崩れは解消した。
アラカルトの方にスタイルに関しての記載があり、読み飛ばしてしまっていた。

#アイコン表示は未解決
まずはローカルで使用したいと考えて、ドキュメントに沿って

$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D

をして、import 'material-design-icons-iconfont/dist/material-design-icons.css' も追加したがアイコンは表示されずに□が表示。

Answer 2

css-loaderはLaravel mixがインストールしてるので不要。
https://github.com/JeffreyWay/laravel-mix/blob/master/package.json

mixはv1
最新はv2
バージョンが違うのが原因では。

Comments

[EjiOsa]

回答ありがとうございます。
確かにLaravel Mixのcss-loaderはv1系でした。ですので、Laravel Mix内のcss-loaderを最新のものにアップグレードしました。
結果、Vuetifyの挙動は変わりません。