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
