❤
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

/extracted-loader/

    Package Sidebar

    Install

    npm i extracted-loader

    Repository

    github.com/sheerun/extracted-loader

    Homepage

    github.com/sheerun/extracted-loader

    Weekly Downloads

    48,545

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    3.84 kB

    Total Files

    4

    Last publish

    Collaborators

    • sheerun
    Try on RunKit
    Report malware