In this tutorial, we’ll integrate SASS into our React project and explore the power of SASS variables. SASS extends CSS by adding programming-like features such as variables, making styles more modular and reusable. This lesson covers configuring Webpack for SASS, creating variables, and understanding their application in dynamic styling.

---

1. Installing Required Packages

To work with SASS, you need two additional packages:

1. SASS Loader: Allows Webpack to process SASS files.
2. Node SASS: Provides access to the SASS library.

Run the following command in your terminal:

npm install --save-dev sass-loader node-sass

---

2. Configuring Webpack for SASS

1. Update the Webpack Configuration:
   In your webpack.config.js file, add support for SASS files. Modify the module rules to include:

   module: {
       rules: [
           {
               test: /\.(scss|sass)$/, // Matches both .scss and .sass files
               use: [
                   'style-loader', // Injects styles into DOM
                   'css-loader',   // Turns CSS into CommonJS
                   'sass-loader'   // Compiles SASS to CSS
               ]
           }
       ]
   }
   

2. Save Changes:
   Ensure you save the Webpack configuration file to apply these changes.

---

3. Renaming and Updating CSS Files

1. Rename the Existing CSS File:
   Change your app-source.css file extension to .scss:

   app-source.scss
   

2. Modify Imports in Your React App:
   Update the import path in your App.js or main component:

   import './app-source.scss';
   

3. Start the Server:
   Restart the server to apply changes:

   npm start
   

---

4. Creating and Using SASS Variables

1. Define Variables:
   In your .scss file, define variables using the $ syntax:

   $background-color: #f0f0f0;
   $text-color: #333;
   
   .custom {
       background-color: $background-color;
       color: $text-color;
   }
   

2. Use Variables in Styles:
   Replace hardcoded values in your styles with variables. For example:

   .button {
       background-color: $background-color;
       color: $text-color;
   }
   

---

5. Testing SASS Variables

1. Save the .scss file and refresh your application.
2. Inspect the changes in your browser to ensure the styles are applied correctly.

---

6. Exploring Dynamic Variables

SASS variables can simplify updates to styles across your application. For instance:

• Global Text Colors:

  $primary-color: #3498db;
  $secondary-color: #2ecc71;
  
  h1 {
      color: $primary-color;
  }
  
  p {
      color: $secondary-color;
  }
  

• Dynamic Backgrounds:

  $bg-dark: #34495e;
  $bg-light: #ecf0f1;
  
  body {
      background-color: $bg-light;
  }
  
  .footer {
      background-color: $bg-dark;
  }
  

---

Conclusion

You’ve successfully integrated SASS into your React project and learned to use SASS variables for cleaner and more maintainable styles. In the next lesson, we’ll delve deeper into SASS features, such as importing external files for modular styles.