https://github.com/sheerun/extracted-loader
It reloads extracted stylesheets extracted with ExtractTextPlugin
https://github.com/sheerun/extracted-loader
chameleon css hot-reload loader stylesheet webpack
Last synced: about 1 year ago
JSON representation
It reloads extracted stylesheets extracted with ExtractTextPlugin
- Host: GitHub
- URL: https://github.com/sheerun/extracted-loader
- Owner: sheerun
- Created: 2017-12-09T18:48:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-07T14:50:04.000Z (over 6 years ago)
- Last Synced: 2025-04-15T12:50:42.981Z (about 1 year ago)
- Topics: chameleon, css, hot-reload, loader, stylesheet, webpack
- Language: JavaScript
- Homepage:
- Size: 138 KB
- Stars: 63
- Watchers: 2
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# extracted-loader [![][npm-image]][npm-url] 
[npm-image]: http://img.shields.io/npm/v/extracted-loader.svg?style=flat-square
[npm-url]: http://npmjs.org/package/extracted-loader
It hotreloads extracted stylesheets extracted with `ExtractTextPlugin`.
No configuration needed. A better [css-hot-loader](https://github.com/shepherdwind/css-hot-loader).
## Use case
You want to hot reload only stylesheets, not the whole page. Great for editing dynamic views.
## Installation
```
npm install extracted-loader --save-dev
```
or
```
yarn add extracted-loader --dev
```
And then you can use it for example as so:
```js
const isDev = process.env.NODE_ENV === 'development'
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
filename: isDev ? "[name].css" : "[name].[contenthash].css",
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
```
For hot reloading to work it is important **to not** use `[contenthash]` in development configuration.
## Example use with sass
```js
config.module.rules.push({
test: /\.(sa|sc|c)ss$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
use: [
"babel-loader",
{
loader: 'css-loader',
options: {
url: true,
minimize: !isDev,
sourceMap: isDev,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDev,
plugins: [
require('autoprefixer')({
/* options */
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDev
}
}
]
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
```
## How it works
By reloading all relevant `` when extracted text changes.
## How to use with...
- [next.js](https://github.com/sheerun/extracted-loader/tree/master/examples/with-next)
## Contributing
Yes, please
## License
MIT