Avoid SASS-files being imported globally Reactjs

Question

In my file Home.tsx containing components for my Home-page I import a SASS-file like this:

import styles from "../styles/Home.module.sass"

Home.module.sass

#container
    width: 100%
    height: 100vh
    display: block
    overflow: auto


#container > div
    width: 50%
    float: left
    height: 100%
    display: flex
    padding: 0 50px
    align-items: center
    box-sizing: border-box
    flex-direction: column
    justify-content: center

...

In Home.tsx I use the CSS-classes like this:

   <span className={styles.title}>Welcome {user.name}</span>

The reason I use 'modules' is because I don't want to import my SASS globally.

In Panel.tsx I import other SASS-files:

import "../styles/Panel.sass"
import "../styles/Popup.sass"

The problem is that even in Panel.tsx the CSS of Home.module.sass is imported even while I don't actually import it. I guess the SASS-files are globally imported. How do I avoid this? I tried using 'modules' but that obviously didn't work.

I guess I could make a parent in Home.module.sass like .home-page and use a container <div className="home-page> in Home.tsx but that doesn't seems optimal.

How to avoid SASS-files being imported globally?

Answer 1

this might be caused from App.tsx/app.jsx my answer will use app.jsx i ma not too hot at Typescript.

i hade a smiler problem recently where elements are being styled by css that is not imported, after tracing the cause here's what i found.

possible cause + explanation

in my router i call all the pages/components to return them for each rout:

import { Routes, Route } from "react-router-dom";
import Login from "./pages/auth/Login.jsx";
import Home from "./pages/Home.jsx";
function App() {
  return (
    <>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/login" element={<Login />} />
      </Routes>
    </>
  );
}

export default App;

inspecting the sources in the dev tools this is what it looks like

even though i am in the login page, all the files i mention in the router are being loaded, and any CSS within these files is also being loaded, this is where the conflict happens.

but look what happens if i comment home routs, remember i am on login page.

They are not imported anymore!!!

So we want to tell react not to load any other component/page other than the one i am currently at. but how?

the way i found out was by googling "react calling all components not one", and i came across this post, this is the github repo for the loadable lib too, i encourage you to visit this question cuz it basically has everything i want to say.

but here's how i implemented it anyway:

solution

import { Routes, Route } from "react-router-dom";
import loadable from "@loadable/component";

const Home = loadable(() => import("./pages/Home.jsx")); // wrap with a loadable
const Login = loadable(() => import("./pages/auth/Login.jsx"));

function App() {
  return ( //remains the same
    <>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/login" element={<Login />} />
      </Routes>
    </>
  );
}

and, it works like a charm, check this out:

i have all routs i want to declare, and its only loading the rout i am at.

this is all assuming that this App.jsx/tsx is the root of your problem, hope it helps.