Rails 现在新的 Rails7 都如何引用别的 plugins 里的 css 的?

QueXuQ · 2022年08月20日 · 最后由 QueXuQ 回复于 2022年08月20日 · 489 次阅读

尝试了一下新的版本。

使用 esbuild 和 tailwind。

试试使用“dropzone”。结果发现怎么都无法加载 dropzone 里的 css 文件。

node_modules/dropzone/dist/min/dropzone.min.css

package.json

{
  "name": "web",
  "private": "true",
  "dependencies": {
    "autoprefixer": "^10.4.4",
    "dropzone": "5.9.3",
    "esbuild": "^0.14.30",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

application.tailwind.css 里,import node_modules/dropzone/dist/min/dropzone.min.css,不行。

在 tailwind.config.js 里加入 require('dropzone') 也不行,第一次接触 rails7,怎么发现前端整得那么多配置文件。不知道现在怎么引入 node_modules 里的 css 文件呢?

https://tailwindcss.com/docs/using-with-preprocessors

tailwind 文档建议是把 tailwind 作为 postcss 的插件使用,由 postcss-import 处理 import。

Rails 7 把选择权还给开发者了,前端配置就是这么多。

Rei 回复

这个看过了,确实是很不错的选择,但是也操作过了,在 application.tailwind.css 直接 import:

@import "./node_modules/dropzone/dist/min/dropzone.min.css";

还是

@import "dropzone/dist/min/dropzone.min.css";

或是

@import "../../../node_modules/dropzone/dist/min/basic.min.css";

都是没有效果的,不知道是不是具体还需要设置什么文件位置之类的配置。

解决问题了,需要再 assets.rb 里加入:Rails.application.config.assets.paths << 'node_modules'

QueXuQ 关闭了讨论。 08月20日 11:39
需要 登录 后方可回复, 如果你还没有账号请 注册新账号