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:

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

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 <link rel="stylesheet"> when extracted text changes.

How to use with...

• next.js

Contributing

Yes, please

License

MIT