如何从Rails 7中的宝石中引用Sass?
我有一个新的Rails 7应用程序,使用SASS,我想从GEM中导入SASS文件(govuk_publishing_components,根据其说明)通过在我的主要应用程序SASS文件中包括Eg @Import“ govuk_publishing_components/govuk_publish_components/govuk_frontend_support”;
。
当我运行纱线构建时:CSS
我会遇到一个错误“找不到示例表的导入” - 我假设我在某个地方缺少某些东西,这些东西可以从GEM中导入此类文件,但是(仔细研究了有关该宝石,Rails Guides和Google搜索的说明),我找不到方法。
我没有太多的铁轨经验,所以我可能会缺少一些明显的东西,但是我发现的唯一建议似乎涉及我获得宝石,编译了SASS(或者还获得了任何宝石的SASS参考)并将输出放置进入我的项目中的文件,这似乎是荒谬的。
如何设置项目,以便可以从宝石中导入Sass?
I've got a new rails 7 application, using sass, and I want to import sass files from a gem (govuk_publishing_components, per their instructions) by including e.g. @import "govuk_publishing_components/govuk_frontend_support";
in my main application sass file.
When I run yarn build:css
I'm getting an error "Can't find stylesheet to import" - I assume I'm missing something somewhere which will allow such files to be imported from a gem, but (having looked through instructions on that gem, rails guides, and a google search) I can't find a way to do that.
I don't have much rails experience, so I may be missing something obvious, but the only suggestions I can find seem to involve me getting the gem, compiling the sass (or also getting any gems its sass references), and putting the output into a file in my project, which seems absurd.
How do I set up my project so I can import sass from a gem?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我假设您正在使用CSSSSSSSSSSSSSSSSSSS-RAIL来构建您的资产,当我们这样做时,我们会将您的CSS从铁路构建到节点的责任转移到节点,并且建议使用节点软件包来包括组件和样式,但我发现我发现我发现我将其与包括资产在内的一些宝石一起使用的小黑客。
对于此GEM中的特定:
YARN添加Govuk-frontend
YARN构建更改:CSS
命令到:sass./app/assesets /stylesheets/application.bootstrap.scss./app/aspets/builds/application.css--no-source-map-load-path-load-path = node_modules/govuk-frontend -i i \'应用程序/资产/样式表\“
(也许您的样式表入口点不同)说明:
当我们添加load-path时,SASS命令将GEM Stylesheet包含在他的负载路径中,我们需要另一个负载路径才能进行Govuk-Frontend,因为该LIB使用Govuk-Frontend作为基础。
OBS:我无法使JS起作用,但是您必须做一些与JS捆绑套件相似的事情以使其正常工作。
I assume you are using cssbundling-rails to build your assets, when we do that we transfer the responsibility to build your css from rails to node, and is this case is recommend to use node packages to include components and styles, but i found i little hack to make it work with some gems that include assets.
For this gem in specific:
yarn add govuk-frontend
yarn build:css
command to:sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules/govuk-frontend -I \"$(bundle show 'pagy')/app/assets/stylesheets\"
(Maybe your stylesheet entrypoint is different)Explanation:
When we add load-path, the sass command includes the gem stylesheet to his load path, and we need another load path to govuk-frontend because this lib uses that govuk-frontend as base.
Obs: I cannot make js works, but you have to do something similiar with your js bundle to make it work.