Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shepherdwind/css-hot-loader
This is a css hot loader, which support hot module replacement for an extracted css file.
https://github.com/shepherdwind/css-hot-loader
css-hot-loader webpack-loader
Last synced: about 1 month ago
JSON representation
This is a css hot loader, which support hot module replacement for an extracted css file.
- Host: GitHub
- URL: https://github.com/shepherdwind/css-hot-loader
- Owner: shepherdwind
- License: mit
- Archived: true
- Created: 2017-01-26T07:37:04.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-16T07:08:48.000Z (over 5 years ago)
- Last Synced: 2024-09-07T16:15:13.861Z (3 months ago)
- Topics: css-hot-loader, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 310
- Watchers: 4
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
- License: License
Awesome Lists containing this project
- awesome-f2e-libs - **css-hot-loader** - CSS 热更新，搭配 mini-css-extract-plugin 使用。 (打包工具 / webpack 辅助工具、Loader 和插件)
- awesome-fe - **css-hot-loader** - CSS 热更新，搭配 mini-css-extract-plugin 使用。 (打包工具 / webpack 辅助工具、Loader 和插件)
README
### CSS Hot Loader
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/css-hot-loader.svg?style=flat-square
[npm-url]: http://npmjs.org/package/css-hot-loader
[download-image]: https://img.shields.io/npm/dm/css-hot-loader.svg?style=flat-square
[download-url]: https://npmjs.org/package/css-hot-loader
[travis-image]: https://img.shields.io/travis/shepherdwind/css-hot-loader.svg?style=flat-square
[travis-url]: https://travis-ci.org/shepherdwind/css-hot-loader
[coveralls-image]: https://img.shields.io/coveralls/shepherdwind/css-hot-loader.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/shepherdwind/css-hot-loader?branch=master
This is a css hot loader, which support hot module replacement for an extracted css file.
### No more maintenance for this repo
Now 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
plugin is no longer needed.
### Why we need css hot loader
In 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.
Also, a lots of people thought about that, How can realize hot reload with
extract-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).
So I wrote this loader, which supports hot module replacement for an extracted css file.
### Install
First install package from npm
```sh
$ npm install css-hot-loader --save-dev
```
Then config webpack.config.js
```javascript
module: {
rules: [
{
test: /\.css/,
use: [
'css-hot-loader',
MiniCssExtractPlugin.loader,
'css-loader',
],
},
] // end rules
},
```
There is an issue to work with webpack4 [#37](https://github.com/shepherdwind/css-hot-loader/issues/37).
Please use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to replace extract-text-webpack-plugin.
### Attention
This plugin require the output css file name static. If output file name depend
on css content, for example `'bundle.[name].[contenthash].css'`, HMR reload will
fail, more detail refer to [#21](https://github.com/shepherdwind/css-hot-loader/issues/21).
### webpack 1.x
Config file example should like this
```javascript
module: {
loaders: [{
test: /\.less$/,
loaders: [
'css-hot-loader',
'extract-text-webpack-plugin',
'less',
...
],
include: path.join(__dirname, 'src')
}]
}
```
See more examples code from https://github.com/shepherdwind/css-hot-loader/tree/v1.4.3/examples
### options
#### fileMap
Option to define you css file reload rule. Since 1.1.0 .
For example `'css-hot-loader?fileMap='../css/{fileName}'` , which mean
```
js/foo.js => css/foo.css
```
Default value is `{fileName}`.
see [#3](https://github.com/shepherdwind/css-hot-loader/issues/3).
#### reloadAll
Force reload all css file.
#### cssModule
When this option is opened, every time you modify the css file, the js file will
reload too. Default closed, this option use with css module.
see [!47](https://github.com/shepherdwind/css-hot-loader/pull/47) and [!51](https://github.com/shepherdwind/css-hot-loader/pull/51)
### How
The realization principle of this loader is very simple. There are some assumed condition:
1. css required by js , so css also be a js file
2. The name of css file, which need hot reload , is the same as js file excuted.
The 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.
Because 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`.
So when a css file changed, We just need find which css file link element, and reload css file.
### License
(The MIT License)