🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

fast-css-loader

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fast-css-loader

blazing fast css loader for webpack

1.0.2
latest
Source
npm
Version published
Weekly downloads
2.1K
-10.14%
Maintainers
1
Weekly downloads
 
Created
Source

fast-css-loader

Blazingly fast css loader for webpack (about 10 times faster than css-loader when process large css files)

install

npm install fast-css-loader --save-dev

VS css-loader

fast-css-loader has higher performance when processing large css files, here is an example when process a 24200+ lines css file:

-------------------------------------
       CSS_LOADER COST: 1644 ms
  FAST_CSS_LOADER COST: 116 ms
-------------------------------------

image

Why faster?

fast-css-loader rewrites resolving parts of @import and url(...) with RegExp and some tricks, it's extramely faster than postcss used by css-loader.

Limitations

Compare with css-loader, fast-css-loader has these limitations:

  • doesn't support sourceMap
  • doesn't support minimize (you can minimize css with mini-css-extract-plugin)
  • doesn't support camelCase option
  • doesn't support css module

If you really need these features, just use original css-loader :)

Usage

just like css-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(svg|bmp|gif|png|jpe?g)$/,
        loader: require.resolve('file-loader'),
        options: {
          name: '[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'fast-css-loader'   // replace you css-loader with fast-css-loader
        ]
      },
    ]
  }
}

Options

NameTypeDefaultDescription
root{String}/Path to resolve URLs, URLs starting with / will not be translated
url{Boolean}trueEnable/Disable url() handling
alias{Object}{}Create aliases to import certain modules more easily
import{Boolean}trueEnable/Disable @import handling
importLoaders{Number}0Number of loaders applied before CSS loader

The above listed options are consistent with css-loader, for more detail please refer to css-loader options

License

MIT

Keywords

fast-css-loader

FAQs

Package last updated on 05 May 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts