webpack-handle-css-loader
A little helper module for adding CSS and CSS extraction support in webpack.
Last updated 2 years ago by rem .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install webpack-handle-css-loader 
SYNC missed versions from official npm registry.

webpack-handle-css-loader

NPM version NPM downloads Build Status donate

This is a short-hand module for adding css and extracting css support.

Install

yarn add webpack-handle-css-loader

# If you want to extract CSS
# Install this plugin as well
yarn add mini-css-extract-plugin

Usage

const HandleCSSLoader = require('webpack-handle-css-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = process.env.NODE_ENV === 'production'

const handleLoader = new HandleCSSLoader({
  minimize: isProd,
  extract: isProd,
  sourceMap: false,
  cssModules: false
})

module.exports = {
  module: {
    rules: [
      // Handle .css files with css-loader & postcss-loader
      handleLoader.css(),
      // Handle .sass files
      // Similar to above but add sass-loader too
      handleLoader.sass()
    ]
  },
  plugins: [
    isProd && new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ].filter(Boolean)
}

Note:

We add postcss-loader to each rule, which means in handleLoader.css() you got something like ['style-loader', 'css-loader', 'postcss-loader'], see here for how to disable it or set options for it.

API

constructor

Parameters

  • options Object (optional, default {})
    • options.styleLoader string style-loader name or path. (optional, default 'style-loader')
    • options.cssLoader string css-loader name or path. (optional, default 'css-loader')
    • options.postcss (Object | boolean) Disable or set options for postcss-loader. (optional, default undefined)
    • options.sourceMap boolean Enable sourcemaps. (optional, default undefined)
    • options.extract boolean Enable CSS extraction. (optional, default undefined)
    • options.minimize boolean Enable CSS minimization. (optional, default undefined)
    • options.cssModules boolean Enable CSS modules. (optional, default undefined)
    • options.extractLoader string loader path of mini-css-extract-plugin. (optional, default 'mini-css-extract-plugin/dist/loader')

set

Set value of instance option

Parameters

getLoader

Get the rule for specific loader

Parameters

  • test RegExp File matcher (optional, default undefined)
  • loader RegExp Loader name or path to it (optional, default undefined)
  • options any Options for relevant loader (optional, default undefined)

Returns Object webpack Rule

css

Get the rule for css files

Parameters

  • test RegExp File matcher (optional, default /\.css$/)
  • options any Options for css-loader (optional, default undefined)

Returns Object webpack Rule

sass

Get the rule for sass files

Parameters

  • test RegExp File matcher (optional, default /\.sass$/)
  • options any Options for sass-loader, indentedSyntax for sass-loader is true here (optional, default undefined)

Returns Object webpack Rule

scss

Get the rule for scss files

Parameters

  • test RegExp File matcher (optional, default /\.scss$/)
  • options any Options for sass-loader (optional, default undefined)

Returns Object webpack Rule

less

Get the rule for less files

Parameters

  • test RegExp File matcher (optional, default /\.less$/)
  • options any Options for less-loader (optional, default undefined)

Returns Object [Rule] webpack Rule

stylus

Get the rule for stylus files

Parameters

  • test RegExp File matcher (optional, default /\.stylus$/)
  • options any Options for stylus-loader (optional, default undefined)

Returns Object webpack Rule

styl

Get the rule for styl files

Parameters

  • test RegExp File matcher (optional, default /\.styl$/)
  • options any Options for stylus-loader (optional, default undefined)

Returns Object webpack Rule

vue

Get the loaders options for vue-loader

Parameters

  • options any Options for relevant loaders (optional, default {})

Examples

handleLoader.vue({
 scss: {},
 less: {}
})

Returns Object

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

webpack-handle-css-loader © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

Current Tags

  • 3.0.1                                ...           latest (2 years ago)

18 Versions

  • 3.0.1                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.5                                ...           3 years ago
  • 1.1.4                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 41
This Month 41
Last Day 14
Last Week 59
Last Month 302
Dependencies (0)
None
Dev Dependencies (9)

Copyright 2014 - 2016 © taobao.org |