Q&A
お手上げ状態のため、どうかご教授ください。
Vuerouterを試して見たくて色々いじっていたらハマってしまいました。
このエラーがどうしても解決できません。
Unable to locate Mix file: /css/app.css. (View: /work/resources/views/welcome.blade.php)
locate Mix関係でインストールもれや記述がないものがあるのでしょうか?
$ npm installでインストールした後に、package.jsonを以下のようにいじりました。
package.json
package.json
1 "private": true, 2 "scripts": { 3 "dev": "npm run development", 4 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 5 "watch": "npm run development -- --watch", 6 "watch-poll": "npm run watch -- --watch-poll", 7 "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", 8 "prod": "npm run production", 9 "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" 10 }, 11 "devDependencies": { 12 "axios": "^0.18", 13 "browser-sync": "^2.26.3", 14 "browser-sync-webpack-plugin": "2.0.1", 15 "cross-env": "^5.1", 16 "laravel-mix": "^4.0.7", 17 "resolve-url-loader": "^2.3.1", 18 "sass": "^1.15.2", 19 "sass-loader": "^7.1.0", 20 "vue": "^2.5.17", 21 "vue-router": "^2.8.1", 22 "vue-template-compiler": "^2.5.21" 23 } 24}
その後、welcome.blade.php、HelloWorldComponent.vueを用意しました。
ここのmix('css/app.css')で怒られているようです。
/src/resources/views/welcome.blade.php
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css"> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
/src/resources/assets/js/components/HelloWorldComponent.vue
<template> <div class="container"> <div class="row"> Hello World! </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
お手数お掛け致しますが、どなたかご教授のほどよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2019/03/24 05:02
2019/03/24 15:27