A less verbose way to add CSS and CSS extraction support in webpack.
MIT License
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 inhandleLoader.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
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
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