https://github.com/retyui/clean-css-loader

CleanCSS loader module for webpack
https://github.com/retyui/clean-css-loader

clean-css loader minify-css webpack webpack-loader

Last synced: 2 months ago
JSON representation

CleanCSS loader module for webpack

• Host: GitHub
• URL: https://github.com/retyui/clean-css-loader
• Owner: retyui
• License: mit
• Created: 2016-01-26T09:10:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T12:50:47.000Z (about 2 years ago)
• Last Synced: 2024-10-28T22:50:03.100Z (3 months ago)
• Topics: clean-css, loader, minify-css, webpack, webpack-loader
• Language: JavaScript
• Homepage:
• Size: 470 KB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

    


    

        

    



A [clean-css](https://github.com/jakubpawlowicz/clean-css) loader for [webpack](https://github.com/webpack/webpack).

# clean-css-loader

[![npm](https://img.shields.io/npm/v/clean-css-loader.svg)](https://www.npmjs.com/package/clean-css-loader)

[![CI](https://github.com/retyui/clean-css-loader/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/clean-css-loader/actions/workflows/nodejs.yml)

[![clean-css-loader install size](https://packagephobia.com/badge?p=clean-css-loader)](https://packagephobia.com/result?p=clean-css-loader)

[![npm clean-css-loader](https://img.shields.io/npm/dm/clean-css-loader.svg)](https://www.npmjs.com/package/clean-css-loader)

## Getting Started

To begin, you'll need to install clean-css-loader:

```bash

yarn add -D clean-css-loader

```

Then add the plugin to your webpack config. For example:

```tsx

// webpack.config.js

const isProduction = process.env.NODE_ENV === "production";

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          "style-loader",

          "css-loader",

          {

            loader: "clean-css-loader",

            options: {

              // Loader options

              disable: !isProduction,

              skipWarn: false,

              // CleasCSS options

              compatibility: "ie9",

              level: 2,

              inline: ["remote"],

              //...

            },

          },

        ],

      },

    ],

  },

};

```

Or using plugin [inline](https://webpack.js.org/concepts/loaders/#inline):

```tsx

// default

import "style-loader!css-loader!clean-css-loader!./style.css";

// with options (query params)

import "style-loader!css-loader!clean-css-loader?level=2&skipWarn=true!./style.css";

// with options (options as JSON)

import "style-loader!css-loader!clean-css-loader?{\"skipWarn\": true,\"level\":2}!./style.css";

```

## Options

#### `disable: boolean`

This option enables/disables minify, useful to easily disable on development mode (default: `false`)

#### `skipWarn: boolean`

This option enables/disables output warnings (default: `false`)

#### `sourceMap: boolean`

Enables/Disables generation of source maps. (default: `compiler.devtool`)

## `CleanCSS` module options

- [clean-css/clean-css#constructor-options](https://github.com/jakubpawlowicz/clean-css#constructor-options)