Utilize a SCSS class defined in one file within a different SCSS file

Question

Utilize a SCSS class defined in one file within a different SCSS file

In my React project, I have a day/night theme button that changes the main body color in the App.scss. It's a simple setup using body.light and body.dark. However, I need to also change the text color in the navigation bar, which is located in a different folder with Navbar.jsx and Navbar.scss. Since I can only edit the App.scss file due to how the button is set up, I'm wondering how I can export or add the .site-nav class from Navbar.scss into my App.scss so that I can include .site-nav.dark and .site-nav.light for it to function correctly.

I attempted renaming Navbar.scss to _Navbar.scss and using a mixin:

@mixin nav {
  //code
  .site-nav {
    //code
  }
}

Then I tried adding this to my App.scss:

@use './Navbar/Navbar.scss' as Navi;

body.dark {
  color: #a58c6f;
  background-color: #1c221f;
  @include Navi.site-nav;
}

But I received an error:

Invalid CSS after "  @include Navi": expected "}", was  ".site-nav;"

. Any suggestions on how to resolve this?

css reactjs sass

Answer 1

Answer №1

When you import Navbar.scss using @use, there is no need to use @include. All classes within Navbar will automatically be accessible in your App.scss. You can define the light and dark classes in either your App.scss or Navbar.scss. Using @import also allows you to import Sass files into other Sass files.

@use 'Navbar/Navbar';
.nav {
   .light { //...}
   .dark { //...}
}

Alternatively

@import 'Navbar/Navbar';
.nav {
   .light { //...}
   .dark { //...}
}

Answer 2

When you import Navbar.scss using @use, there is no need to use @include. All classes within Navbar will automatically be accessible in your App.scss. You can define the light and dark classes in either your App.scss or Navbar.scss. Using @import also allows you to import Sass files into other Sass files.

@use 'Navbar/Navbar';
.nav {
   .light { //...}
   .dark { //...}
}

Alternatively

@import 'Navbar/Navbar';
.nav {
   .light { //...}
   .dark { //...}
}

Utilize a SCSS class defined in one file within a different SCSS file

Answer №1

Similar questions

What is the best way to navigate users to a different page when they click on a button?

Is the order of execution of extraReducers before or after the reducers?

Emotion, material-ui, and typescript may lead to excessively deep type instantiation that could potentially be infinite

Customizing a ControlsFX PopOver in a JavaFX application

Alert: ER_NO_SUCH_TABLE: The table 'companyapp.prescription' is not found

The Material UI dialog is causing issues for CKEditor 4

The border length of the unordered list is equal to half of the length

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

Enhancing the state of a child component in react

You have attempted to make an invalid hook call in the react chat app. Hooks can only be called within the body of a function component

What are some methods to design distinct angular ui bootstrap dialogs?

What could be causing my input to fail to update? - React

Excessive re-renders can be problematic in React as the framework has set limitations to avoid getting stuck in an endless loop

Leveraging react-redux-firebase for integrating cloud functions into React JS applications

Extract the entire div including all its elements and then transmit it using the PHP mail function

Aligning the Bootstrap navbar to the right causes the items to shift to the left

Navigating through the complexities of managing asynchronous props and state in React-components

arranging elements within a container

Unusual dark streak beneath the Wordpress emblem

"Step-by-step guide on using Proptypes in your code