{"id":13802760,"url":"https://github.com/css-modules/webpack-demo","last_synced_at":"2025-05-16T02:07:22.787Z","repository":{"id":32566765,"uuid":"36149541","full_name":"css-modules/webpack-demo","owner":"css-modules","description":"Working demo of CSS Modules, using Webpack's css-loader in module mode","archived":false,"fork":false,"pushed_at":"2020-09-15T19:42:29.000Z","size":192,"stargazers_count":1478,"open_issues_count":22,"forks_count":180,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-11T11:05:47.510Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://css-modules.github.io/webpack-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/css-modules.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-24T00:56:20.000Z","updated_at":"2025-05-04T15:24:23.000Z","dependencies_parsed_at":"2022-08-29T11:11:27.791Z","dependency_job_id":null,"html_url":"https://github.com/css-modules/webpack-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-modules%2Fwebpack-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-modules%2Fwebpack-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-modules%2Fwebpack-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-modules%2Fwebpack-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/css-modules","download_url":"https://codeload.github.com/css-modules/webpack-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453652,"owners_count":22073617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:54.233Z","updated_at":"2025-05-16T02:07:22.769Z","avatar_url":"https://github.com/css-modules.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[ ![Codeship Status for css-modules/webpack-demo](https://codeship.com/projects/abd32560-eb97-0132-9ece-26192dc48311/status?branch=master)](https://codeship.com/projects/83499)\n\n# CSS Modules Webpack Demo\n\nA working demo of [CSS Modules], using [Webpack]'s [css-loader] in [module mode].\n\n## Run the example\n\n```bash\n$ npm install\n$ npm start \u0026 open http://localhost:8080\n```\n\n## npm modules required for CSS modules\n\nIn this project's `package.json` file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features,\nwe've created the following list to describe their purposes. \n\n**Required modules**\n\nThe following modules are the only ones really needed to get started with CSS modules:\n\n|Module|Description|\n|------|------------|\n|[Webpack]|Webpack (obviously...)|\n|[webpack-dev-server]|(Optional) Supports hotloading of changed files etc while developing||\n|[style-loader] and [css-loader]|`style-loader` and `css-loader` process your CSS files. `css-loader` is the loader that actual makes [CSS modules] work|\n\nTo make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your `webpack.config.js` file:\n```\n. . .\n{\n  test: /\\.css$/,\n  loader: 'style!css-loader?modules\u0026importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]' \n}\n. . .\n```\n\n**Optional modules**\n\nThe following modules control the *actual CSS processing*. They are *not* CSS modules specific and can be used with both \"regular\" CSS and CSS modules: \n\n|Module|Description|\n|------|------------|\n|[postcss-loader](https://github.com/postcss/postcss-loader)|Allows execution of various CSS post processor in Webpack. Required for `autoprefixer-core` and `postcss-color-rebeccapurple`|\n|[autoprefixer-core](https://github.com/ai/autoprefixer-core)|Add vendor-prefixes to your css code (according to the GitHub page it is deprecated and should be replaced by [autoprefixer](https://github.com/postcss/autoprefixer)|\n|[postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple)|Another CSS post processor. Only needed to support `rebeccapurple` color in CSS|\n|[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)|Writes the CSS code processed by Webpack into an own CSS-file and not into the generated bundle JavaScript file.|\n  \n**Unrelated modules**\n\nThis modules are only needed for the demo application:\n\n|Module|Description |\n|------|------------|\n|[babel]|ESx-to-ES5 compiler. Mostly needed for React code|\n|[ejs]|JavaScript templating language|\n|[react-to-html-webpack-plugin]|Webpack plug-in that renders React components|\n|[node-libs-browser]|Node libraries for in-browser use|\n|[gh-pages]|Publishes file to a `gh-pages` branches for GitHub pages|\n|[url-loader]|Webpack file handling, e.g. for images|\n|[file-loader]|Webpack file handling, e.g. for images|\n|[raw-loader]|It’s used to load raw css files (as utf8) into the demo so it can be rendered into `\u003ccode\u003e`|\n\n## License\n\n[MIT]\n\n[CSS Modules]: https://github.com/css-modules/css-modules\n[Webpack]: http://webpack.github.io\n[webpack-dev-server]: https://webpack.github.io/docs/webpack-dev-server.html\n[css-loader]: https://github.com/webpack/css-loader\n[module mode]: https://github.com/webpack/css-loader/#css-modules\n[style-loader]: https://github.com/webpack/style-loader\n[url-loader]: https://github.com/webpack/url-loader\n[file-loader]: https://github.com/webpack/file-loader\n[raw-loader]: https://github.com/webpack/raw-loader\n[babel]: https://babeljs.io\n[node-libs-browser]: https://github.com/webpack/node-libs-browser\n[gh-pages]: https://github.com/tschaub/gh-pages\n[react-to-html-webpack-plugin]: https://github.com/markdalgleish/react-to-html-webpack-plugin\n[ejs]: http://www.embeddedjs.com/\n[MIT]: http://markdalgleish.mit-license.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss-modules%2Fwebpack-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcss-modules%2Fwebpack-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss-modules%2Fwebpack-demo/lists"}