Question

当我尝试使用webpacker在我的新rails 5.1 app中加载页面时，我收到此错误。我也希望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

我不想在前面添加太多细节，因为它们会让人分心，然后会有所帮助。请问其他任何事情，我会加入我的问题。谢谢！

Answer 1

在你的application.js中：

  <div [formGroupName]="myGroupName[i]"> //WRONG
  <div [formGroupName]="myGroup[i]">  //<--it's myGroup

Answer 2

我在2018年12月5日（4.2.x？）的Webpack的当前版本的Rails 5.2上遇到了这个确切的问题，并刚刚解决了它。

对我来说，解决方法是将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，因为我还认为从Javascript目录中运行样式会造成混淆（并从此youtube视频中学到了可以完成：https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s）。就这么简单

将目录重命名为app/webpack
像这样调整app/webpack：webpack.yml

希望有帮助。

Answer 3

当HMR设置为false时，样式将内联在捆绑软件中，因此您将不会获得任何CSS捆绑软件。在您的webpacker.yml文件中，将hmr设置为true应该可以解决您的问题。我意识到这是一个老问题。不过相关。

Answer 4

在＆＃34; config / environments / production.rb＆＃34;：

config.public_file_server.enabled = true

删除＆＃34;公共/资产＆＃34;和＆＃34; public / pack＆＃34;

并运行：

RAILS_ENV=production bundle exec rake assets:precompile

Answer 5

我遇到了同样的问题，并通过在控制台中运行update_field('total_number_of_products', $found);解决了这个问题。

upd：rails 5.2，webpacker 3.5，默认配置。

Answer 6

我遇到了这个问题或Rails 6.0.3.1。我更新了文件app / assets / config / manifest.js

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

然后在您的终端中重新启动：

bin/webpack-dev-server

Answer 7

即使import "path/to/application.css"中有application.js行，我也遇到了这样的问题

在我的情况下，这是因为测试资产已使用不同的节点版本进行了预编译

节点模块与节点版本v12一起安装但是测试资产是使用节点版本v10编译的

资产已编译，但是当我查看public/pack-test/application.[hash].js和grep application.scss时，我看到一条关于node-sass的错误行。

我的原因是Rubymine IDE-从nvm中默认节点版本v10开始，它就以某种方式缓存$ PATH值。

我希望我的商店会有人，将来会遇到类似的问题。

Answer 8

修订安装指南

如果您有近期的更改，请修改webpacker的版本（在package.json和Gemfile.lock中使用git story）。

修订时，所有主要错误均已修复：installation official guide

对于我来说，例如，，在修改后，我需要在/packs/application.js中添加一些文件，并将其添加到文件顶部：

import 'core-js/stable'
import 'regenerator-runtime/runtime'

Answer 9

我清除了 webpacker 的缓存，它又开始为我工作了：

rm -rf tmp/cache/webpacker

stylesheet_pack_tag没有在带有webpacker gem的rails 5.1中找到app / javascript / src / application.css

9 个答案:

修订安装指南