Adding Sass to create-react-app Applications
Addingto is one of the first things most developers do when starting an application.
Writing in plain CSS can be done, but Sass provides much more power with features like:
- And More
For the official docs, check out the.
The steps to add Sass to Create React App are:
npm install node-sass:
- Convert your
- Import your
.scssfiles in your React components like
Here's a deeper dive. In order to add Sass to a Create React App application, we need a single command:
# using npm npm install node-sass --save # using yarn yarn add node-sass
Once you have that, we can rename our
App.js file, we can import the Sass file using the
Once we restart our
yarn start command, we can see that our Sass file is imported!
Most of the time, when we use Sass, we'll be creating a system of files where we separate out things like:
To do this, we'll use.
Note: Sass says that
@import will be deprecated in the future. They recommend to use instead. However, currently
@use is not supported in Create React App.
Now you can import that from your main
// imports are pulled from the src folder // we don't need to write src or the _ prefix @import 'colors';
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.
What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)