extracted-loader

It hotreloads extracted stylesheets extracted with ExtractTextPlugin.

No configuration needed. A better 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:

config.module.rules.push({
  test: /\.css$/,
  use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
    /* Your configuration here */
  }))
})

config.plugins.push(new ExtractTextPlugin('index.css'))

Example use with sass

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: !dev,
          sourceMap: dev,
          importLoaders: 2
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: dev,
          plugins: [
            require('autoprefixer')({
              /* options */
            })
          ]
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: dev
        }
      }
    ]
  }))
})

config.plugins.push(new ExtractTextPlugin('index.css'))

How it works

By reloading all relevant <link rel="stylesheet"> when extracted text changes.

How to use with...

• next.js

Contributing

Yes, please

License

MIT

1.0.4

Reloaded element can exist anywhere in the DOM and stays in place when reloaded.

1.0.3

Fix hot reloading on pages other than index

1.0.2

Final documentation update (to show it on npmjs.org)

1.0.1

Fix example how to use this plugin

1.0.0

Initial release