webpack-handle-css-loader
v3.0.1webpack-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
stringvalue
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
Source Code
github.com/egoist/webpack-ha...Metadata
- MIT
- >=4
- EGOIST
- released 3/10/2018