在 Rails 6 中使用 bulma-extensions答案

【问题标题】：Using bulma-extensions in rails 6在 Rails 6 中使用 bulma-extensions
【发布时间】：2020-12-15 16:13:49
【问题描述】：

我有一个使用 bulma 框架运行的 rails 6 应用程序。

Bulma 使用 yarn 安装并通过 app/assets/stylesheets/application.scss 导入

工作正常！

我用 yarn 安装了 bulma-extensions 并尝试了不同的方法都无济于事......

按照文档导入：

@import 'bulma/bulma';
@import '~bulma-extensions/bulma-switch';

或

@import 'bulma/bulma';
@import '~bulma-switch';

两者都从 rails 给出一个硬错误：

Error: File to import not found or unreadable: ~bulma-switch.
    on line 3:1 of app/assets/stylesheets/application.scss
>> @import '~bulma-switch';

我试过了：

@import 'bulma/bulma';
@import 'node_modules/bulma-extensions/bulma-switch/dist/css/bulma-switch.min.css';

这不会给出任何 rails 错误，但也不会呈现开关 - 只是一个普通的复选框。在浏览器控制台中，我得到了这个：

GET http://localhost:3000/assets/node_modules/bulma-extensions/bulma-switch/dist/css/bulma-switch.min.css net::ERR_ABORTED 404 (Not Found)

我注意到 bulma 和 bulma-extensions 的分布非常不同：

布尔玛：

root@ca17f2b6250d:/myapp/node_modules# ls bulma -al
total 68
drwxr-xr-x   9 root root   288 Nov  2 21:36 .
drwxr-xr-x 777 root root 24864 Dec 15 15:40 ..
-rw-r--r--   1 root root 43808 Nov  2 21:35 CHANGELOG.md
-rw-r--r--   1 root root  1080 Nov  2 21:35 LICENSE
-rw-r--r--   1 root root 11138 Nov  2 21:35 README.md
-rw-r--r--   1 root root   300 Nov  2 21:35 bulma.sass
drwxr-xr-x   8 root root   256 Nov  2 21:36 css
-rw-r--r--   1 root root  1761 Nov  2 21:35 package.json
drwxr-xr-x  11 root root   352 Nov  2 21:36 sass

Bulma 扩展/bulma-switch：

root@ca17f2b6250d:/myapp/node_modules# ls bulma-extensions/bulma-switch/ -al
total 20
drwxr-xr-x  8 root root  256 Dec 15 15:36 .
drwxr-xr-x 26 root root  832 Dec 15 15:36 ..
-rw-r--r--  1 root root 6148 Dec 15 15:40 .DS_Store
-rw-r--r--  1 root root 3608 Dec 13 15:26 CHANGELOG.md
-rw-r--r--  1 root root 1063 Dec 13 15:26 LICENSE
-rw-r--r--  1 root root  616 Dec 13 15:26 README.md
drwxr-xr-x  4 root root  128 Dec 15 15:36 dist
drwxr-xr-x  4 root root  128 Dec 15 15:39 src

我不得不承认我不明白 webpack 在这里做了什么。为什么找不到缩小的CSS？为什么它试图直接从 bulma css 文件中提供它而不是将其编译到通用 css 包中？

【问题讨论】：

标签： webpack ruby-on-rails-6 bulma webpacker

【解决方案1】：

当您使用yarn 安装 bulma 时，您需要使用 webpacker 来导入它，而不是资产管道。所以：

app/javascript/packs/application.scss

@import '~bulma';
@import '~bulma-switch';

波浪号 (~) 告诉 webpacker 在 node_modules 中搜索包。

然后你告诉你的布局包含这个包：

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

【讨论】：