css-bundling gem + Tailwind CSS with ActiveAdmin
I’ve been trying the new Rails solution without
webpacker, but using
js-bundling. css-bundling comes with some "pre-choices" like TailwindCSS.
When you install it, links the build css step in the asset pipeline with the command in the package.json, like this in the
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
This works properly.
Now comes the question. I’m using the ActiveAdmin gem, that creates the active_admin.scss file with the following code:
@import "active_admin/mixins"; @import "active_admin/base";
Problem is, if I try to compile this CSS using TailwindCSS as preprocessor, it is unable to find the imports:
tailwindcss --postcss -i app/assets/stylesheets/active_admin.sass.scss -o active_admin.css --trace-warnings (node:52651) UnhandledPromiseRejectionWarning: Error: Failed to find 'active_admin/mixins' in [ .../app/assets/stylesheets ] at .../node_modules/postcss-import/lib/resolve-id.js:35:13 at async LazyResult.runAsync (.../tailwindcss/peers/index.js:57896:11) (Use `node --trace-warnings ...` to show where the warning was created)
So I assume that is unable to find the needed CSS located in the gems. The question is: Do you know how can I tell css-bundling to locate the CSS in different places? I assume also that sprockets is smart enough to do it, but I don’t know how to deal with css-bundling + build:css command in the package.json
Source: CSS – Stack OverflowNovember 29, 2021