From 7644f736b2ce6cc7b877bcb6b7b0d3f219939734 Mon Sep 17 00:00:00 2001 From: Marek Suscak Date: Thu, 27 Sep 2018 23:13:40 +0200 Subject: [PATCH] Mention .module.scss/sass convention (#5145) --- packages/react-scripts/template/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 9507f2c02e8..76b27af7e36 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -515,6 +515,8 @@ If you are concerned about using Webpack-specific semantics, you can put all you This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the **[name].module.css** file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format **[filename]\_[classname]\_\_[hash]**. +> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: *[name].module.scss* or *[name].module.sass*. + An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash. ### `Button.module.css` @@ -585,6 +587,8 @@ This will allow you to do imports like @import 'nprogress/nprogress'; // importing a css file from the nprogress node module ``` +> **Tip:** You can opt into using this feature with [CSS modules](#adding-a-css-modules-stylesheet) too! + ## Post-Processing CSS This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.