CSS Modules Share

This is the supplementary repository for my css modules share.

Setup Prerequisites

• nvm
  • can be installed following these instructions
• yarn
  • can be installed with homebrew: brew install yarn
  • optionally installed with npm: npm install yarn --g

Setup Instructions

• clone this repo
• nvm use
• yarn install
• npm run start - Starts the webpack-dev-server and uses react-hot-loader for HMR

About CSS Modules

• css modules docs
• This repo uses React and in order for React / Webpack CSS Loader to interpolate your styles use the following pattern

import styles from './styles.css';

<p className={styles.summaryText}>Lorem ipsum dolor sit amet...</p>

/* styles.css */

.summaryText {
  font-size: 1rem;
  color: blue;
}

• The official CSS Modules docs suggest to use camelCase for naming.

About PostCSS

• This repo uses PostCSS as a post-processor feel free to add in more plugins

PostCSS Plugin Installation

• yarn add --dev postcss-plugin-name

• Locate the postcss.config.js file in the root directory

module.exports = {
  plugins: [
    require('autoprefixer'),
    // add your plugin here
  ]
};