web-dev-qa-db-ja.com

stylesheet_pack_tagがRails 5.1 with webpacker gemでapp / javascript / src / application.cssを見つけられない

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 --webpackbundlebundle 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

気が散って役に立つので、多くの詳細を前もって追加したくありません。他に何か質問してください。質問に追加します。ありがとう!

20
wuliwong

Application.jsで:

import "path to application.css"
10
Snake

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' %>

importapplication.js内のスタイルシートを必要としませんでした。これは私には違いがないように見えます。

オプションのボーナス:app/javascriptの名前もapp/webpackに変更しましたディレクトリ(およびこのyoutubeビデオから、実行できることを学びました: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s )。それは簡単だった

  1. ディレクトリの名前をapp/webpackに変更します
  2. webpack.ymlの調整:source_path: app/webpack

お役に立てば幸いです。

5
mungojerie

HMRがfalseに設定されている場合、スタイルはバンドル内でインライン化されるため、CSSバンドルは取得されません。 webpacker.ymlファイルで、hmrをtrueに設定すると問題が解決するはずです。これは古い質問です。しかし、関連します。

2
Jay Bennett

「config/environments/production.rb」内:

config.public_file_server.enabled = true

「public/assets」と「public/pack」を削除します

そして実行:

Rails_ENV=production bundle exec rake assets:precompile
0
Enziin System

私は同じ問題を抱えていたので、yarn add postcss-smart-importコンソールで。

upd:Rails 5.2、webpacker 3.5、default config。