SASSy Styles with the Create React App Tool
The create-react-app CLI tool is an incredible way to get started with ReactJS.
If you have ever started a react project in the past you know how daunting the development environment can be. Plus, there are tons of different ways to even set it all up. Who has time to sift through all of that?
Well, the people at Facebook realized all of that and created a cool command line tool to solve those problems.
However, if you like using SCSS or Sass to write your CSS files. Recently they updated the docs with an easy way to do exactly that! Check out those docs here!
First, make sure you have the CLI tool installed with
npm install -g create-react-app.
Then, start a new project with
create-react-app PROJECT_NAME and
If you are going to use SCSS then
npm install --save node-sass-chokidar will install the recommended node package for SCSS and Sass files. If you want to use LESS or Stylus you need to look around for a good package.
In the code below I am using the
In your package.json file add:
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Then, you want to make sure that you run these scripts when you
build your project. On your command line run
npm install --save npm-run-all and add these lines to your package.json:
"start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build",
Make sure that you remove the original
build scripts from the package.json.
Now you can still import css files into your components, however, when you make changes to your scss files node will automatically convert those files into css! Magic! The docs even recommend that you add
*.css to your .gitignore file to keep them out of your source control.