-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS Modules without stylesheet_pack_tag #1720
Comments
From the documentation, you stated, You cannot do without it. |
I also want to use css modules with react in rails. I don't want to have to use the |
I'd like to understand what you would like to happen instead of using Are you hoping to have the styles injected by JS? |
@DanielHeath the problem is that I'm already importing the styles as modules from the javascripts using the |
Have you considered placing From the readme
Hope this helps |
More broadly - how do you envisage using mangled classnames (from modules) in your views? I've proposed #1849 which I think would be a clean way to allow it. |
Hasn't this issue been solved with webpacker 4? According to these docs https://github.com/rails/webpacker/blob/master/docs/css.md I only need to import the style within javascript. I do so, and on development works fine, but on production it doesn't work. It works on production only if I set extract_css: false in webpacker.yml. Not sure if that has performance implications? |
How does that let you use mangled class names in your erb files?
Thanks,
Daniel Heath
… On 1 Apr 2019, at 12:21 pm, Paulo ***@***.***> wrote:
Hasn't this issue been solved with webpacker 4? According to these docs https://github.com/rails/webpacker/blob/master/docs/css.md I only need to import the style within javascript. I do so, and on development works fine, but on production it doesn't work. It works on production only if I set extract_css: false in webpacker.yml. Not sure if that has performance implications?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
I'm working on this too and cannot get it working. I'd like to use react-rails, webpacker, and css modules (without stylesheet_pack_tag). Edit: actually this is working for me. I didn't see this in the docs at first: Stylesheets that end with .module.* are treated as css modules |
How about this: I have all my functions and constants declared in the Rails side of the app (under app/assets/stylesheet) but I'd like to use them in my React components styles (that are imported using css-modules). However, none of those functions or variables work from there, is there a workaround for this? |
@josemigallas hm it works for me (at least in development mode, haven't tried on prod, but I think it will work)
And you'll have access to whathever variable is declared in my_styles.scss I just added the right loader to my webpacker webpack configuration
|
@madroneropaulo of course, how I did not think about that! Thanks! |
Is this issue still relevant? Feel free to reopen if needed |
According to this https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc
If you want to import any css module, you should manually include it in your view using the
<%= stylesheet_pack_tag 'my_styles' %>
tag.I couldn't manage to make it work without it, I'm importing the styles as modules
import styles from './my_styles.scss'
from a jsx component, and then importing that component into a view with<%= javascript_pack_tag 'my_component' %>
. The component itself is imported and rendered, including the classNames generated by the css module. However, the stylesheet is NOT rendered into de DOM, and according tostyles-loader
andcss-loader
they should be rendered out of the box.I'm not sure which config is wrong on webpacker that is preventing this from happening.
this is my
.babelrc
this is my
webpack/environment.js
(I haven't touched the others)And my
package.json
What can I do to be able to import the styles using only the
import style from './my_style.scss
statement from any js?Why it isn't the default behavior?
Thank you
The text was updated successfully, but these errors were encountered: