'Node module css import paths work in development, but not in production

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"
ruby-on-railsesbuildcssbundling-rails


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pseudo-Hippy

Related Questions