stylesheet_pack_tag 使用 webpacker gem 在 rails 5.1 中找不到 app/javascript/src/application.css

Question

当我尝试使用 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

我不想预先添加太多细节，以免它们分散注意力而不是帮助。请询问其他问题，我会添加到我的问题中。谢谢！

Answer 1

在你的 application.js 中：

import "path to application.css"

Answer 2

在"config/environments/production.rb"中：

config.public_file_server.enabled = true

删除"public/assets"和"public/pack"

和运行：

RAILS_ENV=production bundle exec rake assets:precompile

Answer 3

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

更新：rails 5.2，webpacker 3.5，默认配置。

Answer 4

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

Answer 5

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

我不需要 import application.js 中的样式表。这似乎对我没有影响。

可选奖励： 我也将 app/javascript 重命名为 app/webpack 因为我也认为它混淆了运行样式Javascript 目录（并从这个 youtube 视频中了解到它可以完成：https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s）。只需：

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

希望对您有所帮助。

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

即使在 application.js

中有 import "path/to/application.css" 行，我也有这样的问题

在我的例子中，这是因为测试资产是用不同的节点版本预编译的

节点模块安装了节点版本 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 的故事）如果最近有变化而你不担心。

所有重大错误在您修改时已修复：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

stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem

css

ruby-on-rails-5

webpacker

修改安装指南