2

I am moving from Webpack to esbuild with jsbundling-rails & cssbundling-rails.

I have a folder which imports css libraries from vendors like so:

@import "drift-zoom/dist/drift-basic.min.css";
@import "dropzone/dist/min/dropzone.min.css";
@import "select2/dist/css/select2.css";

However I get errors like:

ActionController::RoutingError (No route matches [GET] "/assets/select2/dist/css/select2.css"):

The problem seem that it is looking for theses file in assets, when instead it should be looking in the node_modules folder at the root directory.

I have Rails.application.config.assets.paths << Rails.root.join('node_modules') in config/initializers/assets.rb

My package.json script for css is:

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
Pseudo-Hippy
  • 177
  • 11
  • I don't know if it's just coincidence, but I have two imported scss files, `@import "slick-slider/slick/slick.scss"; @import "slick-slider/slick/slick-theme.scss";` , that don't give the same errors in production. Maybe it's the importing of css files which is causing the issue? – Pseudo-Hippy May 09 '22 at 08:07

2 Answers2

0

I discovered that the issue was that these libraries were trying to import css files, which I guess could not be handled by my sass implementation. I mananaged to find scss versions for most of the libraries and used these instead, and it now works.

Not sure what the solution is for importing css files if an alternative cannot be found. Please comment if you have a suggestion

Pseudo-Hippy
  • 177
  • 11
  • For CSS files in my `vendor/assets/stylesheets` directory, I simply moved them from an `@import my-file.css` to the `stylesheet_link_tag` call in the application layout. – bbonamin May 09 '22 at 17:08
0

this helped for me in config/environments/production.rb:

config.assets.compile = true

Daniel Garmoshka
  • 5,849
  • 39
  • 40