setting up SCSS in react

Syntactically Awesome Style Sheet (SCSS or SASS) is a cascading style sheets (CSS) extension that is used to style webpages with more advanced syntax. It is fully compatible with CSS syntax; but adds features such as variables, nested rules, mixins, imports, and other capabilities that aren't available in CSS.

Stylesheets can become complicated and difficult to maintain as they grow in size, and complexity. SCSS can come in handy for these situations because it provides neatness, reusability of code, and code nesting.

Setting up SCSS in your React app with Visual Studio Code is a great way to keep your code organized and easy to read. In this article, I will walk you through the steps of setting up SCSS in your React App with Visual Studio Code(VS Code).

When it comes to setting up SCSS in your React project, the first step is to create your React app. Apparently. For the sake of this article, I'll assume you're building your app with npx create-react-app. Here's an example of how to use npx create-react-app to create a React App from a Node.js command prompt terminal.

C:\Users\FOLASHADE>npx create-react-app my-app

Here, npx create-react-app is the command you use to create your React app in the terminal, and my-app is the name of the app you're creating(my-app is just an example; make sure you use the exact name you want for your app).

The next step is to set up SCSS after you've created your app. By following the steps below, you can set up SCSS in your app.

step 1: Open your app in VS code.

Step 2: Once you have opened your app in VS Code, look for the VS Code Extensions icon, which is usually in the left corner of the code editor.

Step 3: Click on the icon, and in the search bar, type in "live sass compiler"

Step 4: Select the "live sass compiler" extension. After selecting, you'll see a button to install the extension; click it to install the extension.

Step 5: Once the extension is installed, open up your project folder in VS Code. Then, create a new file ending with ".scss" (without quotes). This will be your main SCSS file where all of your styles will live.

Step 6: You can now write some awesome SCSS code In your.scss file.

Suppose I want to style a div with the className " scss-practice " with a font size of 30px and a red color. Below is an example of a simple SCSS code.

$fontSize : 30px;
$primaryColor: red;

.scss-practice{
    color: $primaryColor;
    font-size: $fontSize;
}

Step 7: If you have the "live sass compiler" extension installed, you will have a "watch sass" option - that detects and compiles SCSS code - at the bottom of your code editor. To convert your SSCS code to CSS, simply click on it.

A .css.map file and a .css file are generated after the SCSS code is successfully compiled. The .css.map file can be ignored while the compiled SCSS code can be found in the .css file.

Step 8: The final step is to import the generated .css file into your app, as demonstrated in the code below.

import './myApp.css'

function App() {
  return (
    <div className="App">
      <div className='scss-practice'>
        My SCSS styling
      </div>      
    </div>
  );
}

export default App;

When the code is run, the text takes on the style specified, as seen below.

Viola! you can now use SCSS in your React app!

You can check out the code sample used in this article here.

For more awesome content, follow me. Also, don't forget like, share, and leave a comment.

Setting up SCSS in your React App with Visual Studio Code