CSS Modules Webpack Demo using preprocessors like Less

A working demo of CSS Modules, using Webpack's css-loader in module mode. Inspired by CSS Modules Webpack demo.

Attention! This demo uses stylelint-webpack-plugin with fix: true (only for less files which don't end with "old.less"), so it will try to auto-fix them if it finds any errors. If you don't wish to use that, change it to fix: false in the webpack.config.js. Rules of the stylelint are extended from the Stylelint SuitCSS config, but indentation changed to 4, added max nesting level: 3, "composes" rule is placed 1st in order and deleted the following rules:

"at-rule-empty-line-before",
"color-hex-length",
"comment-empty-line-before",
"rule-empty-line-before",
/* all suitCSS root-related rules as well */

Install dependencies (required step)

In order to run or build this application, the dependencies need to be installed. First, install Node.js, then install yarn. (The latter is optional but recommended. Using LTS version in both should work, otherwise use Node.js v6.14.1 and yarn v1.2.1)

Using yarn (recommended)

$ yarn

Using npm

$ npm install

Run the example

Using yarn (recommended)

$ yarn start

Using npm

$ npm start

Then go to http://localhost:8080 and see the result.

Build the bundle (optional)

Using yarn (recommended)

$ yarn build-prod

Using npm

$ npm run build-prod

License

MIT