❤
npm
Sign UpSign In

extracted-loader

1.0.7 • Public • Published

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

Contributing

Yes, please

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i extracted-loader

Repository

github.com/sheerun/extracted-loader

Homepage

github.com/sheerun/extracted-loader

Weekly Downloads

43,480

Version

1.0.7

License

MIT

Unpacked Size

3.84 kB

Total Files

4

Last publish

Collaborators

  • sheerun
Try on RunKit
Report malware