25

当我尝试使用 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。(这样写让我觉得有些不对劲。将 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

我不想预先添加太多细节,以防它们更分散注意力然后有帮助。请询问其他任何问题,我会补充我的问题。谢谢!

4

9 回答 9

18

在您的 application.js 中:

import "path to application.css"
于 2017-09-08T07:04:01.253 回答
9

我在 Rails 5.2 上遇到了这个确切的问题,Webpack 的当前版本截至 2018 年 12 月 5 日(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/javascriptapp/webpack因为我还认为从 Javascript 目录中运行样式会令人困惑(并从这个 youtube 视频中了解到可以这样做:https ://www.youtube.com/watch?v= I_GGYIWbmg0&feature=youtu.be&t=32m35s )。简单地:

  1. 将目录重命名为app/webpack
  2. webpacker.yml像这样 调整:source_path: app/webpack

希望有帮助。

于 2018-12-06T12:20:30.760 回答
3

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

于 2018-10-14T05:19:31.763 回答
1

在“config/environments/production.rb”中:

config.public_file_server.enabled = true

删除“public/assets”和“public/pack”

并运行:

RAILS_ENV=production bundle exec rake assets:precompile
于 2018-06-15T08:12:31.317 回答
0

即使有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 值。

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

于 2020-06-25T08:40:40.177 回答
0

修订安装指南

如果您不担心最近的更改,请修改 webpacker 的版本(在git story 中package.json和使用 git story 中)。Gemfile.lock

修改时修复所有重大错误:安装官方指南

以我为例,修改后我需要在 中添加一些文件/packs/application.js,在文件顶部包含以下内容:

import 'core-js/stable'
import 'regenerator-runtime/runtime'
于 2020-12-15T17:59:47.853 回答
0

我遇到了同样的问题,并通过yarn add postcss-smart-import在控制台中运行解决了它。

更新:rails 5.2,webpacker 3.5,默认配置。

于 2018-08-06T12:00:54.603 回答
0

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

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

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

bin/webpack-dev-server
于 2020-06-09T08:22:17.440 回答
0

我清除了 webpacker 的缓存,它又开始为我工作了:

rm -rf tmp/cache/webpacker

于 2020-12-28T22:43:11.840 回答