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

2024-04-02

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

Here is 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

我不想预先添加太多细节,以免它们更分散注意力而不是有帮助。请询问其他问题,我将添加我的问题。谢谢!


在你的 application.js 中:

import "path to application.css"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

stylesheet_pack_tag 在使用 webpacker gem 的 Rails 5.1 中找不到 app/javascript/src/application.css 的相关文章

  • 绝对定位的表头 (th) - 哪个浏览器是错误的?

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x
  • 无法从代码隐藏更改 CSSClass

    这一定是世界上最简单的事情 但它就是行不通 我有一个外部 div 我想对其应用一个类以使其显示样式 none 以便隐藏其中的所有内容 它实际上是一个 asp panel 元素 所以我假设我可以在后面的代码中设置 control CssCla
  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 使用过渡+不透明度更改+溢出隐藏时出现问题

    如果您看到我共享的代码示例 您可以看到覆盖层超出了框的范围 我将问题追溯到transition属性 我想删除div之外的内容 溢出没有按预期工作 删除transition有效 但如果可能的话我想保留它 任何帮助表示赞赏 代码笔链接 http
  • 如何在 Bootstrap 4 中垂直对齐?

    我试图在 Bootstrap 4 4 0 0 alpha 6 中将我的大屏幕的内容垂直对齐在中心 在 Mac 桌面上的 Chrome 和 Safari 中 这种情况发生得很好 但在我的 iOS 设备上则不然 文本仍然与顶部对齐 我强制大屏幕
  • 使用 jQuery 检测容器溢出?

    我见过这个问题 https stackoverflow com questions 2059743 detect elements overflow using jquery但感觉必须有一个 更干净 的 jQuery 方法来做到这一点 我什
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr
  • 与 960.gs 的列高度相同吗?

    我有一排 4 列 根据我在每一列中放入的信息量 它们将具有不同的高度 如果你给它们加上背景颜色你就可以看到 我如何给其他列最大高度的列的高度 您可以使用 jQuery 来执行此操作 http www cssnewbie com equal
  • 如何从iframe访问文档中的

    I have an iframe 我在检查器元素中发现 img 标签位于具有 body 标签的 document 中 img src Images landingpage jpg 我需要访问此图像 landing page jpg 以便更改
  • Outlook 有条件 CSS If 吗?

    我需要一些特定的 css 来发送 html 电子邮件 但仅限于 Outlook 我正在寻找相当于
  • 如何防止桌面浏览器(Chrome、Safari)缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的
  • 网格布局:创建 CSS,以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 水平和垂直居中 div 位于页面中间,页眉和页脚粘在页面顶部和底部

    我正在尝试制作一个具有固定高度页眉和页脚的页面 页眉位于屏幕顶部 100 宽度 页脚位于底部 100 宽度 我想将一个具有可变高度内容的 div 居中放置在页眉和页脚之间的空间中 在下面的 jsfiddle 中 如果内容比空格短 它会起作用

随机推荐

  • 在 R 中,如何将两个 XML 文档合并为一个文档?

    我正在从基于 XML 的 API 查询数据 API 响应是分页的 因此我必须进行大量查询才能获取完整的数据集 Using read xml来自xml2包中 我可以轻松地发出每个请求并将其保存为 XML 文档 但我一直无法弄清楚如何使用该库将
  • 类型错误:(0,_schemaUtils.default)不是函数

    我有一个简单的 React 应用程序创建create react app在本地主机上运行良好 我现在正在尝试 Dockerify 该应用程序 这是我的 package json name yeet version 0 1 0 engines
  • SSIS 2008 中 ADO NET 源和 OLE DB 源之间的区别?

    谁能说出 SSIS 2008 中 ADO NET 源和 OLE DB 源之间的区别 它们在任何上下文中都相同吗 对于小型数据集 SSIS 2008 中的 ADO NET 源和 OLE DB 源之间几乎没有什么区别 它们之间的区别在于它们与其
  • 作为承诺的结果表示重新发送

    我不明白发生了什么事 Using q承诺 这有效 const deferred q defer deferred resolve Hellow const myPromise deferred promise router get item
  • OpenGL 统一缓冲区 std140 布局

    我正在尝试通过 GeForce 8600 GT 上的统一块将整数数组传递给片段着色器 一切均根据 GLSL version 330 在应用程序方面我有 int MyArray 7102 filling binding etc glBuffe
  • 为控制台应用程序制作 UI [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 如何为控制台应用程序制作一个界面 使它们看起来像edit com在微软的操作系统下 目标语言是 C C 和 C NET 看一下curs
  • 如何将序列中的下一个值放入变量中?

    因此 我正在编写一个存储过程 但无法将序列的下一个值放入变量中 序列名称被传递到函数中并存储为varchar2多变的 如何将该序列中的下一个值放入局部变量中 像这样的东西吗 create or replace procedure next
  • gulp 命令给出找不到模块的错误

    我正在尝试在 Windows 上设置基本的 aurelia 应用程序 我已遵循以下指示 http aurelia io get started html http aurelia io get started html 包括 安装节点js
  • 如何获取宿主元素引用?

    如何获取 Angular 2 中的宿主元素引用 就我而言 我想知道我的组件是否有焦点 您可以使用以下方式获取宿主元素引用 class MyComponent constructor private elRef ElementRef cons
  • 为什么我不应该有一个单一的整体实用程序库?

    我们有一些通用库 C 但我想这不是特定于平台或语言的 我们称它们为 A B 和 C 库 A 引用了 B 和 C 库 B 引用了第三方 DLL 库 C 是独立的 三个独立项目背后的想法是 每个库都有不同的功能 但随着时间的推移 库 A 或多或
  • mysql 使用另一个表中的值更新列

    我有两张桌子 看起来都像 id name value 1 Joe 22 2 Derk 30 我需要复制的值value from tableA to tableB基于每个表中的检查名称 对此有何建议UPDATE陈述 除了这个答案之外 如果您需
  • 连接表达式以获取数据帧的子集

    我正在尝试创建一个函数来计算子集数据框中列的平均值 这里的技巧是 我总是想要有几个子集条件 然后可以选择将更多条件传递给函数以进一步子集数据帧 假设我的数据如下所示 dat lt data frame var1 rep letters 26
  • Paster db init -c XXXX/development.ini 不适用于 CKAN 命令“db”不知道

    我是 CKAN 和 python 的第一次用户 我的大部分开发都是在 NET 我是第一次在 Windows 7 计算机上设置 CKAN 我正在尝试运行该行 paster db init c FOLDER NAME development i
  • PHP中如何获取最后修改的文件?

    我想创建一个列表 列出上次修改的文件的名称 http www searchr us web search 我想在我的主页上显示这些文件名 它们应该根据上次修改的文件进行更改 你可以使用这个功能 function listdir by dat
  • 调用未定义函数password_hash()

    我正在开发我的网站时 现在正在本地主机上运行 php 版本 5 4 16 我想用password hash 但我不断收到此错误 致命错误 调用未定义函数password hash dir to file php在线的123 为什么会发生这种
  • 如何加载目录中的所有文件?

    正如标题所说 如何加载目录中的每个文件 我对c 和lua都感兴趣 编辑 对于 Windows 我很高兴能得到一些真正的工作代码 尤其是 lua 我可以用 boost filesystem for c 来做 对于 Lua 你需要模块Lua文件
  • Heroku 30 秒超时(长外部查询)的解决方法

    注意 这篇文章中的某些内容可能不是最佳实践 被警告 我正在开发一个连接到微实例 AWS 服务器的管理仪表板 该数据库拥有数千万条记录 大多数查询都会在几秒钟内返回 但有些查询需要长达一两分钟的时间才能返回 这取决于我无法控制的一些事情 由于
  • GHC如何实现unsafePerformIO?

    从 开始unsafePerformIO并以 RTS libc 或操作系统 API 结束 GHC 如何实现 IO 我试图了解当标准前奏不可用时 IO 在 Haskell 中如何工作 例如 如果我们出于某种原因自己实现标准前奏 我原本希望在 G
  • 寻找参考nodejs,expressjs和mongodb应用程序用作模板

    我想构建一个 Nodejs 应用程序 并且正在寻找一个很好的参考应用程序来用作模板 理想情况下 该应用程序应具有以下功能 使用nodejs expressjs 和 mongodb 有一个用户认证子系统 我想下载这样一个应用程序并让它开箱即用
  • stylesheet_pack_tag 在使用 webpacker gem 的 Rails 5.1 中找不到 app/javascript/src/application.css

    当我尝试使用 webpacker 在新的 Rails 5 1 应用程序中加载页面时 收到此错误 我希望 webpacker 也能处理 CSS Started GET for 1 at 2017 09 01 12 20 23 0400 Pro