webpackerでcssを読み込ませて、
webpack-dev-serverでホットリロードして開発したいのですが、
起動すると(Compiled successfullyは表示されず下記になります。)cssが効かない状態になってしまいます。
再度、bin/webpackでコンパイルすれば元に戻る状態です。
rails/webpacker/#2688
こちらを確認して、bundle exec rails webpacker:compileを行ったら、すでにアップデートされており、
webpacker.ymlのcompile: true
になっており、
改善策が見つからずでございます。
ご教授をお願いできませんでしょうか。
よろしくお願いいたします。
追記
dev-server起動時に表示されるhttp://localhost:8080/にアクセスしてみたら、
以前、nuxtjsの練習で開発していた時の様な画面が表示されました。
接続先を3035にして、rails側でどうにかしたいです。
ご教授お願いできませんでしょうか。
よろしくお願いします。
Everything's up-to-date. Nothing to do
railsサーバーには下記のエラーが表示されてます。
ActionController::RoutingError (No route matches [GET] "/packs/js/application-d92e6843ff26022b8d77.js")
consoleには同じ様なエラーが表示されております。
http://localhost:4000/packs/js/application-d92e6843ff26022b8d77.js net::ERR_ABORTED 404 (Not Found)
$ ./bin/webpack-dev-server warning ../../../../package.json: No license field <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/ <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.3.5:8080/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/ <i> [webpack-dev-server] Content not from webpack is served from '/#' directory Hash: b8f7e1c71a0c9832a62f Version: webpack 4.46.0 Time: 2042ms Built at: 2021-09-04 22:39:36 Asset Size Chunks Chunk Names js/application-b8f7e1c71a0c9832a62f.js 727 KiB application [emitted] [immutable] application js/application-b8f7e1c71a0c9832a62f.js.map 848 KiB application [emitted] [dev] application manifest.json 364 bytes [emitted] Entrypoint application = js/application-b8f7e1c71a0c9832a62f.js js/application-b8f7e1c71a0c9832a62f.js.map [0] multi (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info (webpack)/hot/dev-server.js ./app/javascript/packs/application.js 52 bytes {application} [built] [./app/javascript/channels/index.js] 211 bytes {application} [built] [./app/javascript/css/application.scss] 2.18 KiB {application} [built] [./app/javascript/packs/application.js] 259 bytes {application} [built] [./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js] 33.9 KiB {application} [built] [./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js] 28.5 KiB {application} [built] [./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info] (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info 4.86 KiB {application} [built] [./node_modules/webpack-dev-server/client/modules/strip-ansi/index.js] (webpack)-dev-server/client/modules/strip-ansi/index.js 6.13 KiB {application} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 4.96 KiB {application} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.48 KiB {application} [built] [./node_modules/webpack-dev-server/client/utils/createSocketURL.js] (webpack)-dev-server/client/utils/createSocketURL.js 3 KiB {application} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 385 bytes {application} [built] [./node_modules/webpack-dev-server/client/utils/parseURL.js] (webpack)-dev-server/client/utils/parseURL.js 1.31 KiB {application} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 2.2 KiB {application} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.63 KiB {application} [built] + 28 hidden modules
javascript/packs/application.js import Rails from "@rails/ujs" // import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import "../css/application.scss" Rails.start() // Turbolinks.start() ActiveStorage.start()
config/webpacker.yml development: <<: *default compile: true dev_server: https: false host: localhost port: 3035 public: localhost:3035 hmr: true # Inline should be set to true if using HMR inline: true overlay: true compress: true disable_host_check: true use_local_ip: false quiet: false pretty: false headers: 'Access-Control-Allow-Origin': '*' watch_options: ignored: '**/node_modules/**'
あなたの回答
tips
プレビュー