{"id":13563195,"url":"https://github.com/shepherdwind/css-hot-loader","last_synced_at":"2025-12-30T04:20:44.213Z","repository":{"id":57741924,"uuid":"80094652","full_name":"shepherdwind/css-hot-loader","owner":"shepherdwind","description":"This is a css hot loader, which support hot module replacement for an extracted css file.","archived":true,"fork":false,"pushed_at":"2019-04-16T07:08:48.000Z","size":84,"stargazers_count":310,"open_issues_count":0,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-04T15:52:21.307Z","etag":null,"topics":["css-hot-loader","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shepherdwind.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-26T07:37:04.000Z","updated_at":"2024-07-04T13:03:14.000Z","dependencies_parsed_at":"2022-09-06T10:50:46.459Z","dependency_job_id":null,"html_url":"https://github.com/shepherdwind/css-hot-loader","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shepherdwind%2Fcss-hot-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shepherdwind%2Fcss-hot-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shepherdwind%2Fcss-hot-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shepherdwind%2Fcss-hot-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shepherdwind","download_url":"https://codeload.github.com/shepherdwind/css-hot-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247065421,"owners_count":20877773,"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":["css-hot-loader","webpack-loader"],"created_at":"2024-08-01T13:01:16.295Z","updated_at":"2025-12-14T20:38:34.860Z","avatar_url":"https://github.com/shepherdwind.png","language":"JavaScript","readme":"### CSS Hot Loader\n\n[![build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/css-hot-loader.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/css-hot-loader\n[download-image]: https://img.shields.io/npm/dm/css-hot-loader.svg?style=flat-square\n[download-url]: https://npmjs.org/package/css-hot-loader\n[travis-image]: https://img.shields.io/travis/shepherdwind/css-hot-loader.svg?style=flat-square\n[travis-url]: https://travis-ci.org/shepherdwind/css-hot-loader\n[coveralls-image]: https://img.shields.io/coveralls/shepherdwind/css-hot-loader.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/shepherdwind/css-hot-loader?branch=master\n\nThis is a css hot loader, which support hot module replacement for an extracted css file.\n\n### No more maintenance for this repo\n\nNow the mini-css-extract-plugin now support [css hot reload](https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example) (since 0.6.x) , so that this\nplugin is no longer needed.\n\n### Why we need css hot loader\n\nIn most cases, we can realize css hot reload by [style-loader](https://github.com/webpack/style-loader) . But style-loader need inject style tag into document, Before js ready, the web page will have no any style. That is not good experience.\n\nAlso, a lots of people thought about that, How can realize hot reload with\nextract-text-webpack-plugin. For example [#30](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/30) , [#!89](https://github.com/webpack-contrib/extract-text-webpack-plugin/pull/89).\n\nSo I wrote this loader, which supports hot module replacement for an extracted css file.\n\n### Install\n\nFirst install package from npm\n\n```sh\n$ npm install css-hot-loader --save-dev\n```\n\nThen config webpack.config.js\n\n```javascript\nmodule: {\n  rules: [\n    {\n      test: /\\.css/,\n      use: [\n        'css-hot-loader',\n        MiniCssExtractPlugin.loader,\n        'css-loader',\n      ],\n    },\n  ] // end rules\n},\n```\n\nThere is an issue to work with webpack4 [#37](https://github.com/shepherdwind/css-hot-loader/issues/37).\nPlease use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to replace extract-text-webpack-plugin.\n\n### Attention\n\nThis plugin require the output css file name static. If output file name depend\non css content, for example `'bundle.[name].[contenthash].css'`, HMR reload will\nfail, more detail refer to [#21](https://github.com/shepherdwind/css-hot-loader/issues/21).\n\n\n### webpack 1.x\n\nConfig file example should like this\n\n```javascript\n  module: {\n    loaders: [{\n      test: /\\.less$/,\n      loaders: [\n        'css-hot-loader',\n        'extract-text-webpack-plugin',\n        'less',\n        ...\n       ],\n      include: path.join(__dirname, 'src')\n    }]\n  }\n```\n\nSee more examples code from https://github.com/shepherdwind/css-hot-loader/tree/v1.4.3/examples\n\n### options\n\n#### fileMap\n\nOption to define you css file reload rule. Since 1.1.0 .\n\nFor example `'css-hot-loader?fileMap='../css/{fileName}'` , which mean\n\n```\njs/foo.js =\u003e css/foo.css\n```\n\nDefault value is `{fileName}`.\n\nsee [#3](https://github.com/shepherdwind/css-hot-loader/issues/3).\n\n#### reloadAll\n\nForce reload all css file.\n\n#### cssModule\n\nWhen this option is opened, every time you modify the css file, the js file will\nreload too. Default closed, this option use with css module.\n\nsee [!47](https://github.com/shepherdwind/css-hot-loader/pull/47) and [!51](https://github.com/shepherdwind/css-hot-loader/pull/51)\n\n### How\n\n\nThe realization principle of this loader is very simple. There are some assumed condition:\n\n1. css required by js , so css also be a js file\n2. The name of css file, which need hot reload , is the same as js file excuted.\n\nThe secend assumption is often established. If you use extract-text-webpack-plugin , entry `foo.js` will extract css file `foo.css`. This principle will help us to locate the url of css file extracted.\n\nBecause every css file will be a js module , every css file change can affect a module change. CSS hot loader will accept this kind change, then find extracted css file by `document.currentScript`.\n\nSo when a css file changed, We just need find which css file link element, and reload css file.\n\n### License\n\n(The MIT License)\n","funding_links":[],"categories":["JavaScript","打包工具","webpack loader plugin"],"sub_categories":["webpack 辅助工具、Loader 和插件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshepherdwind%2Fcss-hot-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshepherdwind%2Fcss-hot-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshepherdwind%2Fcss-hot-loader/lists"}