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>
)