Style options

Template uses vanilla CSS with autoprefixer enabled. To avoid class name collisions and reduce nesting, we are using css-modules. To make css-modules work, the stylesheet file name should have .module suffix.

import React from 'react';
import classes from './Component.module.css';

const Component = () => (
  <div className={classes.wrapper}>Component</div>
)

CRA doesn't support style pre-processors, except SASS. But this doesn't mean, that we shouldn't use them. In order to add support for custom style processor without ejecting, we can use file watchers. File watchers will track changes in style files and compile them to vanilla CSS, consumed by CRA.

SASS/SCSS

SASS/SCSS support comes “out of the box” in CRA. To enable it:

1. Install node-sass

yarn add node-sass --dev

2. Import SASS/SCSS files straight into Component.

import React from 'react';
import classes from './Component.module.scss'; // note the changed extension

const Component = () => (
  <div className={classes.wrapper}>Component</div>
)

3. Change .lintstagedrc to lint SCSS files instead of CSS.

{
  "*.js": [
    "eslint --fix"
  ],
  "*.scss": [
    "stylelint --fix"
  ]
}

PostCSS watcher

1. Install postcss-cli and related plugins:

yarn add --dev postcss-nested postcss-cli postcss-preset-env npm-run-all

2. Modify package scripts:

{
    "build:style": "postcss src/**/*.pcss --dir src --base src --ext css",
    "watch:style": "yarn build:style -w",
    "start": "npm-run-all -p watch:style start:js",
    "start:js": "react-scripts start",
    "build:js": "react-scripts build",
    "build": "npm-run-all build:style build:js"
}

3. Add postcss.config.js file in the root folder. With following configuration:

const pkg = require('./package.json');

module.exports = {
  plugins: [
    require('postcss-nested'), // handle nested selectors, like LESS or SASS
    require('postcss-preset-env')({
      browsers: pkg.browserslist.production, // use browsers list from production mode
      stage: 1,
    }),
  ],
};

4. Add rule to .gitignore and .stylelintrc to ignore all CSS files, since we are generating them.

.gitignore

# css
*.css

.stylelintrc

{
 "ignoreFiles": ["**/*.snap", "**/*.css"]
}

5. Change .lintstagedrc to lint files with .pcss extension instead of .css.

{
  "*.js": [
    "eslint --fix"
  ],
  "*.pcss": [
    "stylelint --fix"
  ]
}

Less watcher

1. Install less and related plugins:

yarn add --dev less less-watch-compiler npm-run-all

2. Modify package scripts:

{
    "build:style": "yarn watch:style --run-once",
    "watch:style": "less-watch-compiler src src",
    "start": "npm-run-all -p watch:style start:js",
    "start:js": "react-scripts start",
    "build:js": "react-scripts build",
    "build": "npm-run-all build:style build:js"
}

3. Add rule to .gitignore and .stylelintrc to ignore all CSS files, since we are generating them.

.gitignore

# css
*.css

.stylelintrc

{
 "ignoreFiles": ["**/*.snap", "**/*.css"]
}

4. Change .lintstagedrc to lint .less files instead of .css.

{
  "*.js": [
    "eslint --fix"
  ],
  "*.less": [
    "stylelint --fix"
  ]
}