Giter Club home page Giter Club logo

clean-css-loader's Introduction

A clean-css loader for webpack.

clean-css-loader

npm CI clean-css-loader install size npm clean-css-loader

Getting Started

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

yarn add -D clean-css-loader

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

// 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:

// 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-loader's People

Contributors

retyui avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

clean-css-loader's Issues

Webpack 5 support

Please update the package.json peer deps to support WebPack 5.

npm ERR! Found: [email protected]
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/clean-css-loader
npm ERR!   clean-css-loader@"2.0.0" from the root project

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Not working with extract-text plugin

In webpack 2.

Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?-minimize!./~/clean-css-loader!./~/postcss-loader!./~/vue-template-loader/lib/scoped-style-loader.js?id=data-v-13!./~/stylus-relative-loader?paths[]=src/&resolve url&include css!./src/app/components/shell/top-nav/top-nav.s
tyl
    Module build failed: TypeError: Cannot read property 'cleancss' of undefined
        at Object.module.exports (.../node_modules/clean-css-loader/index.js:7:25)

All I'm doing is including it in the "use" option that includes the loaders. I tried it with and without options.

Minify by default

Great loader! Thank you.

I think it would be good to add a note in README that this loader minifies by default (for now).

An ideal solution would be to not minify by default, and allow setting that explicitly (same like css-loader).

Cheers!

Error when upgrading from v3 to v4

Hi,
I just upgraded from v3 to v4 and I receive the following error when running webpack:

  ERROR in ./node_modules/toastr/build/toastr.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/clean-css-loader/lib/index.js??ruleSet[1].rules[2].use[2]!./node_modules/toastr/build/toastr.min.css)
  Module build failed (from ./node_modules/clean-css-loader/lib/index.js):
  TypeError: (0 , schema_utils_1.validate) is not a function
      at Object.cleanCssLoader (D:\XXXXXXX\XXXXXXX\XXXXXXX\XXXXXXX\XXXXXXX\node_modules\clean-css-loader\lib\index.js:20:31)
   @ ./node_modules/toastr/build/toastr.min.css 8:6-186 22:17-24 26:0-156 26:0-156 27:22-29 27:33-47 27:50-64
   @ ./Scripts/XXXXXXX/XXXXXXX.js 11:26-13:32
   @ ./Scripts/XXXXXXX/XXXXXXX/XXXXXXX/XXXXXXX/XXXXXXX.jsx 6:0-37 44:8-21
   @ ./Scripts/XXXXXXX/XXXXXXX/XXXXXXX/XXXXXXX/XXXXXXX.jsx 15:0-80 44:27-44
   @ ./Scripts/XXXXXXX/XXXXXXX.js 15:0-87 65:4-25

toastr.min.css is not the only CSS file that fails to build. Other files as well, this is just an example.
When I downgrade back to v3.0.0 everything is working.

Any suggestions?
Thanks!

add option to disable minification

It would be very useful to have an option to disable minification for dev and other use-cases:

loader: "clean-css-loader",
  options: {
    minification: false
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.