Webpack
to deduplicate, minify and compress CSS
as much as possible.
Loader for Getting Started
To begin you'll need to install quark-loader
npm install --save-dev quark-loader
Examples
Add the loader to your webpack config.
file.js
;
Chain the quark-loader
with css-loader and the style-loader to immediately minimize and apply all styles to the DOM.
webpack.config.js
moduleexports = module: rules: test: /\.css$/ use: loader: 'style-loader' loader: 'css-loader' options: modules: true localIdentName: '[hash:base64:3]' importLoaders: 3 loader: 'quark-loader' options: compress: true ;
You can also use the quark-loader
with sass-loader. For example
module: rules: test: /\.scss$/ use: loader: 'style-loader' loader: 'css-loader' options: modules: true localIdentName: '[hash:base64:3]' importLoaders: 3 loader: 'quark-loader' options: compress: true loader: 'sass-loader'
How it works
quark-loader
process the CSS
files and replaced our style with a reference to our declarations. In this way, we can remove repetitive styles from our CSS and make it minimum.
style.css
Let's review what we get at the end
Extracted CSS file
.t7E { top: 100px;}.BOO {}._1dA {}._1rC {}._3e1 {}
Without CSS
extraction
exportslocals = "top--100px": "t7E" "a": "BOO t7E" "b": "_1dA t7E" "c": "_1rC t7E" "d": "_3e1 t7E";