Not possible to import external stylesheets

[papermana]

Is this a bug report?

No.

Currently, there is no way, as far as I know, to add an external stylesheet to the app. Notably, importing stylesheets in JS will not work because of CSS Modules. This makes it impossible to use certain 3rd party components.

One solution is to add a separate config for CSS/SCSS files imported from node_modules. I made a proof of concept commit here that seems to work when I make those changes locally. I'm not sure if I'm not omitting anything in the config, though. Also, I haven't made any changes to the production config. I can make a proper PR if the changes here look good to others.

[virzen]

Seems fine to me. Would love to get it released soon. 😄

[papermana]

Made a PR, hopefully it's all right

[papermana]

Actually, one more thing to look at is external in-CSS imports. For instance, react-dates has a section here with code like

@import '~react-dates/css/variables.scss';

This should work as well but I'm not sure if my proposed solution provides that.

[paweljedrzejczyk]

I believe this should work:

:global {
  @import '~react-dates/css/variables.scss';
}

[virzen]

Should it work out of the box? With the following code

:global {
  @import '~normalize.css';
  @import '~bootstrap/dist/css/bootstrap.css';
}

normalize.css gets included, but bootstrap's import results in

./src/global-styles.scss
Module not found: Can't resolve '~bootstrap/dist/css/bootstrap.css' in '/Users/wiktor/Workspace/spideo-front/src'

Bootstrap is installed of course.

[virzen]

I can see that it can't handle nested directories. @import '~bootstrap'; seems to get imported properly (of course it results in syntax error, because it's javascript, not css).

[virzen]

Ok, the problem was .css at the end. Everything works fine. 👍