webpack-handle-css-loader
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 inhandleLoader.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, defaultundefined
) -
options.sourceMap
boolean Enable sourcemaps. (optional, defaultundefined
) -
options.extract
boolean Enable CSS extraction. (optional, defaultundefined
) -
options.minimize
boolean Enable CSS minimization. (optional, defaultundefined
) -
options.cssModules
boolean Enable CSS modules. (optional, defaultundefined
) -
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
-
key
string -
value
any
getLoader
Get the rule for specific loader
Parameters
-
test
RegExp File matcher (optional, defaultundefined
) -
loader
RegExp Loader name or path to it (optional, defaultundefined
) -
options
any Options for relevant loader (optional, defaultundefined
)
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, defaultundefined
)
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 istrue
here (optional, defaultundefined
)
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, defaultundefined
)
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, defaultundefined
)
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, defaultundefined
)
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, defaultundefined
)
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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