CSS file isn't written to /lib

[coryhouse]

Currently an imported Sass file isn't written to /lib. It's only written to /umd. Is this a known limitation, or a bug?

[insin]

The CSS which gets written to umd/ wasn't even intentional, it's just that we're using Webpack to create that bundle and all the rules and plugins for it happen to be defined as part of nwb's config 😸

Do you know what common practices for shipping Sass (and compiled CSS?) are for components? Personally I've only shipped components which used CSS, and I just stuck that in a /css dir and imported it relatively from src/ so it would work for all the npm-published builds (assuming the user was using Webpack).

There's also a --copy-files flag (which just gets passed on to Babel) if copying non-.js stuff to lib/ works for your needs.

[coryhouse]

Thanks for the quick reply!

Do you know what common practices for shipping Sass (and compiled CSS?) are for components?

Ironically, I came across this issue because I was curious how nwb would handle it. I'm currently searching for working examples. That said, I was expecting it to:

1. Compile the SASS to CSS
2. Write the file to /css

The CSS which gets written to umd/ wasn't even intentional

I'm confused. What is the intended use case for this? CSS is handled great for the umd build, so it appears the gap is the /lib build behavior. Agreed?

[dan-kez]

I am also experiencing this issue. I would be happy to have the css generated to a /css directory.

Note, I would appreciate this working for both the lib and es directories.

At present this is causing an issue for my team where users of our component library need to consume our sass files to make the components render correctly. I'd prefer that the could just include a css file and call it a day without updating their webpack config.

[d-nation]

Has there been any more thought to this story?

Our team has several versions of the same component library, each submodule'ing in a shared sass lib. I'd rather not make the consumers of my nwb react library compile the sass themselves.

Several people have suggested using the same approach as Create-React-App where you author in sass and import the resulting css into your component's js. Would that be the recommendation for my use case?

[RavenHursT]

Just came across this happening in a new component I'm trying to publish. Has there been any traction on this as of yet?

[aviskarkc10]

I created a PR documenting how this should be done. It's basically the same thing you'd do for CRA.