el

extracted-loader

It reloads extracted stylesheets extracted with ExtractTextPlugin

Showing:

Popularity

Downloads/wk

151K

GitHub Stars

67

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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...

Contributing

Yes, please

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100