Webpack 在rails 6中使用bulma扩展

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

Bulma与纱线一起安装，并与app/assets/stylesheets/application.scss一起导入

很好

我用纱线安装了bulma延长线，并尝试了不同的方法，但没有效果

根据文件导入：

@import 'bulma/bulma';
@import '~bulma-extensions/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扩展的分布非常不同：

布尔马：

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开关：

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包中？

当您使用

纱线安装bulma时，您需要使用webpacker导入，而不是资产管道。因此：

app/javascript/packs/application.scss

@import'~bulma'；
@导入“~bulma开关”；

波浪号（~）告诉webpacker在node_模块中搜索包

然后告诉布局要包含此包：

app/views/layouts/application.html.erb



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