Reactjs Question posted in
The new location for the React Documentation can be found here.

Avoid SASS-files being imported globally Reactjs

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?

Tags:

2

Answers


  1. 0

    Can you please check the below solution? Hope it will work for you.

    You have written code like below

    #container > div
    width: 50%
    float: left
    height: 100%
....

    this will apply all the direct child div of the #container, instead of this you have to give a specific class to that div element that may resolve your problem, for eg.

    #container > .child-element
    width: 50%
    float: left
    height: 100%
    display: flex
    ...

    you have to share a more detailed code or codesandbox link for a perfect solution.

    Login or Signup to reply.
  2. 0

    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

    dev tools on login home imported, why?

    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.
    dev tools on login home commented out

    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:

    dev tools with loadable

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search