无法将凉亭组件 css 添加到 Rails 4.2 中的资产管道中
Posted
技术标签:
【中文标题】无法将凉亭组件 css 添加到 Rails 4.2 中的资产管道中【英文标题】:Can't add bower component css into assets pipeline in Rails 4.2 【发布时间】:2015-04-07 13:44:30 【问题描述】:我正在尝试将凉亭组件(角度 ui-grid)添加到我的 angularJS + Rails 4.2 应用程序中。 该组件在开发环境中运行良好,但在生产环境中它可以在没有 css 的情况下工作。
我已通过凉亭将组件安装到 vendor/assets/bower_components 并进行了以下更改以将其集成到资产管道中:
application.css.scss
@import "angular-ui-grid/ui-grid.css";
application.js
//= require angular-ui-grid/ui-grid.min.js
//= require_tree .
application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
assets.rb
Rails.application.config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
Rails.application.config.assets.precompile += %w( ui-grid.css )
我执行了 rake assets:precompile,它生成了以下输出:
Writing /source/myapp/public/assets/application-546acf8e965ef660d80be61d1314dcef.js
Writing /source/myapp/public/assets/application-bf4c9902bcb508f0250e847dc63c3321.css
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-70f73890ff81d1e19e758473a9ff1f1e.eot
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-069439f9e57a19c07fad6095a9056446.svg
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-f681537c8135d9deb670ceadfb8eddd4.ttf
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-a3319d6298bca8dd2bcaae48735afe00.woff
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-e4c812e8c30abb98e787ab176cb74129.eot
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-c9450138a7b29547267148145ba65c3e.svg
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-7ef334f0e220af09b5aa3a8283ccaa6a.ttf
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-97811df08b2f65e376ad5b37fc5f315b.woff
由于某种原因,预编译输出中缺少 ../assets/angular-ui-grid/ui-grid.css!
当我在生产环境中运行我的 Rails 应用程序时(在开发中它运行良好),ui-grid 组件正在运行(=> ui-grid javascript 已成功集成到资产管道中),但没有它的 css(所有ui-grid.css 类),它看起来很可怕。
如何将 ui-grid.css 添加到资产管道中?
【问题讨论】:
【参考方案1】:我遇到了同样的问题。除了做 sass 导入,还需要做 sprockets 导入。
添加
*= require angular-ui-grid/ui-grid.css
到清单,你应该没问题。
【讨论】:
我应该在哪个文件中添加链轮导入?此行在 application.css.scss 中无效 在 application.css.scss 中,在文件的开头 - 就像您将包含任何其他基于资产的 css 文件一样。你遇到了什么错误? 当我运行 rake assets:precompile 我得到错误:Sass::SyntaxError: Invalid CSS after "*": expected "", was "= require angul..."
您是否将它放在文件开头的注释掉部分中?你能发布你的 application.css.scss 文件吗?
谢谢!在 application.css.scss 的注释代码中添加这一行将 ui-grid.css 添加到资产管道(因此我接受答案)。现在的问题是其余的 ui-grid 资产(.svg .woff .ttf .eot)没有正确编译(尽管出现在 assets:precompile 任务的输出中) - 在浏览器控制台中我得到 404 错误他们全部,即http://localhost:3000/assets/ui-grid.woff
上的404@以上是关于无法将凉亭组件 css 添加到 Rails 4.2 中的资产管道中的主要内容,如果未能解决你的问题,请参考以下文章
如何将带有 PostCSS 清除的 Tailwind CSS 添加到 Rails 5?