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

Posted 2023-02-15

技术标签:

【中文标题】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 【发布时间】：2018-02-10 18:39:04 【问题描述】：

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

我不想预先添加太多细节，以防它们更分散注意力而不是有用。请询问其他任何问题，我会补充我的问题。谢谢！

【问题讨论】：

你是怎么解决这个问题的？这可能对将来的任何人都有帮助***.com/questions/58506351/… 【参考方案1】：

在你的 application.js 中：

import "path to application.css"

【讨论】：

很好的答案。令人惊讶的是，这没有在某处记录。这也为我解决了这个问题......但为什么我需要在我的application.js 中添加这一行？？你可以check this out in the Webpacker docs here。【参考方案2】：

我在 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/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

希望对您有所帮助。

【讨论】：

我还必须将文件扩展名更改为 .css 以外的其他名称（例如 .scss）。否则 Webpack 会在清单文件中将其列为.js。谢谢你！我只需要重命名我的文件。现在是base.css【参考方案3】：

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

【讨论】：

【参考方案4】：

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

config.public_file_server.enabled = true

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

然后运行：

RAILS_ENV=production bundle exec rake assets:precompile

【讨论】：

【参考方案5】：

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

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

【讨论】：

【参考方案6】：

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

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

然后在终端中重新启动：

bin/webpack-dev-server

【讨论】：

【参考方案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 值。

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

【讨论】：

【参考方案8】：

修订安装指南

如果您不担心最近的更改，请修改 webpacker 的版本（在 package.json 和 Gemfile.lock 中带有 git 故事）。

修改时修复所有主要错误：installation official guide

对我来说，例如，修改后我需要在/packs/application.js中添加一些文件，在文件顶部包含这个：

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

【讨论】：

【参考方案9】：

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

rm -rf tmp/cache/webpacker

【讨论】：

以上是关于stylesheet_pack_tag 在带有 webpacker gem 的 rails 5.1 中找不到 app/javascript/src/application.css的主要内容，如果未能解决你的问题，请参考以下文章

Dijkstra 的单源最短路径，带有额外的边，权重为“w”

在带有W单位的Srcset中，浏览器是否考虑高像素密度显示的全分辨率？

带有来自w网站阅读器（rss、json）的新闻并显示用户（通知、存储）的应用程序

当正则表达式包含 \w 时，带有 label_replace 的 promql 正则表达式返回空白值

未找到带有参数 '('',)' 的 'tagged' 的反向操作。尝试了 1 种模式：['^tag/(?P<slug>[-\w]+)/$']

带有滑动窗口元素的矩阵