Webpackerを使用して新しいRails 5.1アプリでページをロードしようとすると、このエラーが表示されます。webpackerにもCSSを処理させたいです。
Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400
Processing by HomeController#welcome as HTML
Rendering home/welcome.html.erb within layouts/application
Rendered home/welcome.html.erb within layouts/application (0.4ms)
Completed 500 Internal Server Error in 28ms
ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes:
1. You want to set wepbacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/application-1ba6db9cf5c0fb48c785.js",
"hello_react.js": "/packs/hello_react-812cbb4d606734bec7a9.js"
}
):
7: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
8: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
9: <%= javascript_pack_tag 'application' %>
10: <%= stylesheet_pack_tag 'application' %>
11: </head>
12:
13: <body>
app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb__1178607493020013329_70339213085820'
./bin/webpack-dev-server
とともにRails server
を実行しています。私は次を使用してアプリを作成しました:
Rails new myapp --webpack
bundle
bundle exec Rails webpacker:install:react
単一のCSSファイルapp/javascript/src/application.css
があります。 (それによって何かがおかしいと感じるようになります。JavaScriptディレクトリ内にcssを置くことは不適切と思われます。)
root to: 'home#welcome'
と定義された単一のルートルートがあります。
ここにapp/views/layouts/application.html.erb
があります
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<%= csrf_meta_tags %>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
これが私のconfig/webpacker.yml
です(開発中にコンパイルをfalse
に設定しようとしました。
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .coffee
- .erb
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
dev_server:
Host: localhost
port: 3035
hmr: false
https: false
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production demands on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
気が散って役に立つので、多くの詳細を前もって追加したくありません。他に何か質問してください。質問に追加します。ありがとう!
Application.jsで:
import "path to application.css"
Rails 5.2で、2018年12月5日のWebpackの現在のバージョン(4.2.x?)でこの問題があり、それを解決しました。
私にとっての修正は、application.css
の名前を他のものに変更することでした。 Webpackと命名の衝突があったと思います。
だから今私のパックタグは次のようになります:
<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
import
application.js
内のスタイルシートを必要としませんでした。これは私には違いがないように見えます。
オプションのボーナス:app/javascript
の名前もapp/webpack
に変更しましたディレクトリ(およびこのyoutubeビデオから、実行できることを学びました: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s )。それは簡単だった
app/webpack
に変更しますwebpack.yml
の調整:source_path: app/webpack
お役に立てば幸いです。
HMRがfalseに設定されている場合、スタイルはバンドル内でインライン化されるため、CSSバンドルは取得されません。 webpacker.ymlファイルで、hmrをtrueに設定すると問題が解決するはずです。これは古い質問です。しかし、関連します。
「config/environments/production.rb」内:
config.public_file_server.enabled = true
「public/assets」と「public/pack」を削除します
そして実行:
Rails_ENV=production bundle exec rake assets:precompile
私は同じ問題を抱えていたので、yarn add postcss-smart-import
コンソールで。
upd:Rails 5.2、webpacker 3.5、default config。