質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1074閲覧

【rails6】 webpack-dev-serverを起動するとCSSが効かなくなる

yozakura_dayo

総合スコア4

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/09/04 15:00

編集2021/09/04 18:26

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/**'

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問