web-dev-qa-db-fra.com

stylesheet_pack_tag ne trouve pas app / javascript / src / application.css dans Rails 5.1 avec webpacker gem

Je reçois cette erreur lorsque j'essaie de charger une page dans ma nouvelle application Rails 5.1 à l'aide de webpacker. J'aimerais que webpacker gère également 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'

J'exécute le ./bin/webpack-dev-server à côté du Rails server. J'ai créé l'application en utilisant:

Rails new myapp --webpackbundlebundle exec Rails webpacker:install:react

J'ai un seul fichier CSS app/javascript/src/application.css. (Une écriture qui me fait sentir que quelque chose ne va pas. Mettre css à l'intérieur d'un répertoire javascript semble inapproprié.)

Je viens de définir un itinéraire racine unique root to: 'home#welcome'.

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

Voici mon config/webpacker.yml (J'ai également essayé de définir compile sur false en cours de développement.

# 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

Je ne veux pas ajouter trop de détails à l'avance car ils sont plus distrayants qu'utiles. Veuillez demander autre chose et j'ajouterai à ma question. Merci!

cssruby-on-rails-5webpacker
20
wuliwong

Dans votre application.js:

import "path to application.css"
10
Snake

J'ai eu ce problème exact, sur Rails 5.2 avec la version actuelle de Webpack au 5 décembre 2018 (4.2.x?) Et je l'ai juste résolu.

Le correctif pour moi était de renommer application.css à autre chose. Je pense qu'il y a eu une collision de noms avec Webpack.

Alors maintenant, mes balises de pack ressemblent à:

<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Je n'avais PAS besoin de import la feuille de style à l'intérieur application.js. Cela ne fait aucune différence pour moi.

BONUS OPTIONNEL: J'ai également renommé le app/javascript à app/webpack parce que je pensais aussi qu'il était déroutant d'exécuter des styles à partir d'un répertoire Javascript (et j'ai appris de cette vidéo youtube que cela pouvait être fait: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature= youtu.be & t = 32m35s ). C'était aussi simple que

  1. Renommer le répertoire en app/webpack
  2. Réglage de webpack.yml ainsi: source_path: app/webpack

J'espère que cela pourra aider.

5
mungojerie

Lorsque HMR est défini sur false, les styles sont intégrés dans le bundle afin que vous n'obteniez aucun bundle CSS. Dans votre fichier webpacker.yml, définir hmr sur true devrait résoudre votre problème. Je me rends compte que c'est une vieille question. Pertinent, cependant.

2
Jay Bennett

Dans "config/environnements/production.rb":

config.public_file_server.enabled = true

Supprimer "public/assets" et "public/pack"

Et courir:

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

J'ai eu le même problème et l'ai résolu en exécutant yarn add postcss-smart-import dans la console.

upd: Rails 5.2, webpacker 3.5, configuration par défaut.

0
Maxim Khan-Magomedov