npmは関係ないとおもいます。
お行儀よく、TailWind CSS Vue3に導入ガイド に従ったインストールが必要かも？
vue.jsと相性が悪いのでは？
phpフレームワーク: laravel
JavaScriptフレームワーク: vue.js
cssフレームワーク: TailWind CSS
競合するはずがないのにインストールするプロセスでは作法があるようです。
プロジェクト名が異なるというオチはないですか？
Like!
Tailwindcssを反映させたい
解決したいこと
Tailwindcssを反映させるためにnpm run devコマンドを実行したのですが、エラーが出てしまい対処法を教えていただきたいです。
発生している問題・エラー
ec2-user:~/environment/att (dev_basis04) $ npm run dev
> dev
> npm run development
> development
> mix
[webpack-cli] Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
at VueLoaderPlugin.apply (/home/ec2-user/environment/att/node_modules/vue-loader/dist/pluginWebpack5.js:112:19)
at Plugin.apply (/home/ec2-user/environment/att/node_modules/vue-loader/dist/plugin.js:16:20)
at createCompiler (/home/ec2-user/environment/att/node_modules/webpack/lib/webpack.js:73:12)
at create (/home/ec2-user/environment/att/node_modules/webpack/lib/webpack.js:134:16)
at webpack (/home/ec2-user/environment/att/node_modules/webpack/lib/webpack.js:142:47)
at WebpackCLI.f [as webpack] (/home/ec2-user/environment/att/node_modules/webpack/lib/index.js:69:16)
at WebpackCLI.createCompiler (/home/ec2-user/environment/att/node_modules/webpack-cli/lib/webpack-cli.js:1789:29)
at async WebpackCLI.runWebpack (/home/ec2-user/environment/att/node_modules/webpack-cli/lib/webpack-cli.js:1890:20)
at async Command.<anonymous> (/home/ec2-user/environment/att/node_modules/webpack-cli/lib/webpack-cli.js:912:21)
at async Promise.all (index 1)
自分で試したこと
webpack.mix.jsファイルにvue-loader に関する設定がされていないことが原因なのではないかとわかりwebpack.mix.jsファイルを確認したところ問題は見当たらなかった。
以下はwebpack.mix.jsファイルです。
const mix = require('laravel-mix');
const { VueLoaderPlugin } = require('vue-loader');
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [new VueLoaderPlugin()]
});
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
vue-loader がインストールされているのかをnpm list vue-loaderコマンドで確認したところバージョン17.2.2でインストールされていることが確認できた。
ec2-user:~/environment/att (dev_basis04) $ npm list vue-loader
att@ /home/ec2-user/environment/att
└── vue-loader@17.2.2
npmの再インストールを考えましたが、再インストールによる影響が私自身よくわかっておらず、未だ行えていません。私の力不足で大変恐縮ですが、解決方法のわかる方がいらっしゃったらご教授いただければ幸いです。
0
1Answer
1
Comments
@upskill
Questioner回答してくださりありがとうございます。プロジェクト名が異なるということはなかったので、一度教えてくださったページを参考にインストールの手順を確認してみます。教えてくださりありがとうございます。