Я получаю эту ошибку, когда пытаюсь загрузить страницу в моем новом приложении rails 5.1 с помощью webpacker. Я хотел бы, чтобы 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. (Написание, которое заставляет меня чувствовать, что что-то не так. Помещение css в директорию javascript кажется неправильным.)

У меня только один корневой маршрут определен 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

Я не хочу добавлять слишком много деталей заранее, если они скорее отвлекают, чем помогают. Пожалуйста, спросите что-нибудь еще, и я добавлю к моему вопросу. Спасибо!

23
wuliwong 1 Сен 2017 в 19:38

6 ответов

Лучший ответ

В вашем application.js:

import "path to application.css"
15
Snake 8 Сен 2017 в 07:04

У меня была эта проблема или Rails 6.0.3.1. Я обновил файл app / assets / config / manifest.js

//= link_directory ../../javascript/packs
//= link_directory ../images

Затем перезапустите в своем терминале:

bin/webpack-dev-server
0
Shadow Debugger 9 Июн 2020 в 08:22

В "config / средах / production.rb":

config.public_file_server.enabled = true

Удалить "public / assets" и "public / pack"

И запустить:

RAILS_ENV=production bundle exec rake assets:precompile
0
Enziin System 15 Июн 2018 в 08:22

У меня была такая проблема даже с import "path/to/application.css" строкой в application.js

В моем случае это было потому, что тестовые ресурсы были предварительно скомпилированы с другой версией узла

Узлы модулей были установлены с версией узла v12, но тестовые ресурсы были скомпилированы с версией узла v10

Ресурсы были скомпилированы, но когда я заглянул внутрь public/pack-test/application.[hash].js и grep application.scss, я увидел строку ошибки об отсутствии node-sass.

В моем случае проблема была с Rubymine IDE - он как-то кэшировал значение $ PATH со времени, когда у меня была версия по умолчанию для узла v10 в nvm.

Я надеюсь, что у моего магазина будет кто-то, кто столкнется с подобной проблемой в будущем.

0
Senid 25 Июн 2020 в 08:40

Когда для HMR установлено значение false, стили встраиваются в пакет, поэтому вы не получите пакет CSS. В вашем файле webpacker.yml установка hmr в true должна решить вашу проблему. Я понимаю, что это старый вопрос. Уместно, хотя.

2
Jay Bennett 14 Окт 2018 в 05:19

У меня была та же проблема, и я решил ее, запустив yarn add postcss-smart-import в консоли.

Обн: rails 5.2, webpacker 3.5, конфигурация по умолчанию.

0
Maxim Khan-Magomedov 6 Авг 2018 в 12:00