I've faced a problem: when I want to import to my main stylesheet a library that I've installed via yarn I received an error that probably I shouldn't receive because I do not control the way it imports internal files.
Let me describe:
I have a library selectize.js. I import necessary scss file super simple, after I did yarn install I do
@import "@selectize/selectize/dist/scss/selectize"; in my application.scss
But when I try to import bootstrap 5 styles
@import "@selectize/selectize/dist/scss/selectize.bootstrap5";
I receive an error
Error: Can't find stylesheet to import.
╷
1 │ @import "lib/bootstrap5/functions";
This import command is inside @selectize/selectize/dist/scss/selectize.bootstrap5 that I've imported above and this file exists inside this node_modules folder.
So, it looks like when I compile
sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
it takes a wrong relative path and use the path of my root app? what should I do?
What do I use:
Rails 7.0.4.2
yarn 1.22.19
sass 1.53.0
@selectize/selectize 0.15.2
You could add another --load-path as a workaround:
--load-path=node_modules/@selectize/selectize/dist
Add it in your package.json compile script:
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --load-path=node_modules/@selectize/selectize/dist",
Fingers crossed, this doesn't clash with anything in your app, otherwise you'd need to compile selectize separately or use plain css files.