Webpacker: Import CSS from CSS don't seem to work

[clmntgr]

I'm trying to split my CSS into multiple CSS files and importing all them from a main CSS file. But I can't find the way to make it work.

Here is a subset of my folder tree:

|- app
|\- javascript
| |\- packs
| | |- style.js
| |\- style
| | |- index.js
| | |- style.css
| | |- forms.css
|- .postcssrc.yml

Here is what contains most important files

app/javascript/packs/style.js

import 'style'

app/javascript/style/index.js

import './style.css'

app/javascript/style/style.css

@import "./app/javascript/style/forms.css"; // My issue is here

app/javascript/style/forms.css

input {
  border: red solid 1px;
}

So my issue is that app/javascript/style/forms.css is not imported into my final CSS file.
I tried those syntax:

• @import "./app/javascript/style/forms.css";
• @import "app/javascript/style/forms.css";
• @import "./forms.css";
• @import "forms.css";
• @import "style/forms.css";
• @import "./style/forms.css";

All those syntax don't work.

I don't know if I'm doing something wrong or if this isn't possible (I think it should).

[alokpant]

Hey, just started with webpack, I also had similar problems. I solve it by adding into webpacker.yml

resolved_paths: ['app/javascript']

This way, i can directly reference all files,

@import "style/forms.css";

[clmntgr]

This didn't fix the issue, I will try to check webpacker code to understand why

[ytbryan]

Did you use <%= stylesheet_pack_tag "application" %> together with <%=javascript_pack_tag "application" %>

See https://github.com/rails/webpacker#usage

[clmntgr]

@ytbryan Yes

[gauravtiwari]

@Uhsac Is this still an issue?

[clmntgr]

I didn't try with a new version of webpacker if any, I changed my code architecture to work without that

[gauravtiwari]

@Uhsac Right, the above isn't an issue for us. Out of the box, Webpacker supports multiple packs and css.

Should it be just this instead?

@import "./forms.css"; // My issue is here

[clmntgr]

I tried this way and it wasn't working, I will try again and come back to you if it's fixed.

[Capitalsav]

Maybe my example should be usefull for somebody.
I have simple structure of files in app/javascript.js
javascript
|
|-packs
| |
| |-application.js
|
|-style
| |
| |-application.scss
| |-users.scss

In app/javascript/packs/application.js I have this:
import 'style/application.scss'
In app/javascript/style/application.scss I have this code:
@import "users";
It works for me good. Styles from users.scss available in html.
Also don't forget to:

= javascript_pack_tag 'application'
= stylesheet_pack_tag 'application'

[virgil0116]

@Capitalsav your method is right.thank you very much.You're a genius