React Sass

How it works

Sass is a stylesheet compiler, not a React runtime feature. Vite can process a .scss import when the matching Sass package is installed. This example uses a small variable and a nested selector for a lending notice. The lab pins Sass 1.93.2 and uses no remote imports or third-party mixin collection. A production team should still decide whether plain CSS already meets its needs before adding another build dependency.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1 and Sass 1.93.2. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs
• src/panel.scss

Example

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import './panel.scss';

function App() {
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <section className="loan-panel">
        <h2>Return reminder</h2>
        <p>Wipe the item clean before returning it.</p>
      </section>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The notice has a four-pixel blue border, with its paragraph margin set by the nested rule.

The complete entry point imports panel.scss. Vite compiles it into CSS, so the browser never executes Sass. The supporting package file adds the pinned compiler only for this lesson. Keep nesting shallow enough that the output selectors remain understandable. Sass variables are build-time values; CSS custom properties can change in the browser and serve a different role.

Supporting files for this lab

$edge: #0078d4;
.loan-panel {
  border: 4px solid $edge;
  padding: 1rem;
  p {
    margin-bottom: 0;
  }
}