Skip to content
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

Build css modules using webpack in prod build #17

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

coryhouse
Copy link
Owner

This is a quick example of using webpack to compile CSS Modules for production. Not perfect, since this also processes the JS, which we're already handling separately via the build:commonjs script, but you can throw the JS processed by Webpack away.

@sag1v
Copy link

sag1v commented Dec 19, 2017

Thanks for the effort Cory, much appreciated!
I'm afraid though that i don't fully understand this pattern, we are actually bundling the css to a single file main.some_hash.css and it is in the build/static/css folder, i've added it inside the lib/TextInputCSSModules folder and renamed it to textInput.css as the module expect to import it. but still no luck, the css module remains empty (as you can see in my screenshot below).
*Note that i did it inside node_modules/ps-react in another project as a consumer, and of course i forked this branch and manually copied the files to the node_modules.
cory1

@coryhouse coryhouse changed the title Enable css-modules. Build css module using webpack in prod build Build css modules using webpack in prod build Dec 20, 2017
@coryhouse
Copy link
Owner Author

Hi @sag1v - Sorry, yes, I agree this is just a starting point, not a finished example. I'm going to work on a full working solution, but it will be a few days before I complete it. Thanks for your patience! :)

@sag1v
Copy link

sag1v commented Dec 20, 2017

@coryhouse Thank you so much for doing this!
I think the root of this issue is that the js is processed out of webpack's flow, hence you can't really do something like this:
import styles from './styles.css'
because we use babel for our js processing which doesn't have something like css-loader with css modules option.
Maybe if the consumer of our library will use webpack with css modules and will include our library in the configuration of the css-loader (most people will exclude the whole node_modules folder ) this can work.
I may be wrong here, and i hope i do 🤞

@sag1v
Copy link

sag1v commented Jan 23, 2018

WIP in Porto! Woot!

Seems legit. Are we good to go? 🙏 😄

"build:copy-files": "node scripts/copyBuildFiles.js",
"predeploy:docs": "npm run build:docs",
"deploy:docs": "gh-pages -d build",
"build:commonjs": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js",
"build:commonjs": "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.js",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure webpack can keep the folder structure of the components for both the js and css files?

@coryhouse
Copy link
Owner Author

Hi Sagiv - Sorry, I'm busy traveling out of the country for consulting and committed this as work in progress just to back it up. It's not complete. Not sure when I'll get it done since consulting work is very busy right now, but I think this commit is in the right direction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants