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

yarn add webpack-handle-css-loader

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

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.

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 value of instance option

Parameters

• key string
• value any

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

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

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

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

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

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

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

Get the loaders options for vue-loader

Parameters

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

Examples

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

Returns Object

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

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