Using Multiple SCSS Files to Reference a Centralized Style Sheet

I am currently developing a React application and facing an issue with my SCSS files. I have three SCSS files, one main file that contains theme variable colors, and the other two are located in component folders.

When I import the main SCSS file into the contactForm styles.css and apply the variable color, everything works as expected. However, when I import the main SCSS file into the keepInTouchForm styles.scss, it disrupts the styling of the contactForm.

The question is why does this happen and what is the proper way to maintain one main.scss file with all variables and reference them across multiple SCSS files?

Below is my folder structure:

- components
-- contactForm
--- index.js
--- styles.scss

-- keepInTouchForm
--- index.js
--- styles.scss

- scss
-- main.scss

The main.scss file contains the following code:

$theme-colors: (
  'primary': #00a677,
  'secondary': #dde1e7,
);

Code inside styles.scss for the contactForm folder:

@import '../../scss/main.scss';

.form-control {
  border: 1px solid theme-color('secondary');
}

Code inside styles.scss for the keepInTouchForm folder:

@import '../../scss/main.scss'; //this breaks the above code

Answer №1

The syntax of <code>map-get has proven to be effective for my needs.

map-get($theme-colors, primary);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now. I want to turn one of the option ...

sending the properties from the menu component to the dish details

Having trouble with a react.js app I'm working on that involves rendering dish cards. The dish object is always null when passed as props from MenuComponent to DishDetail, resulting in nothing being displayed on the screen. Can someone please assist m ...

Vertical alignment is somewhat functioning but not completely

Could someone help me figure out why my green DIV is not vertically aligned in the middle of the red DIV and suggest a solution? Thank you! Link to JSFiddle .wrapper-alt { margin-right: auto; margin-left: auto; width: 980px; display:tab ...

What could be causing my header component to rerender even when there are no new props being received?

https://codesandbox.io/s/crimson-field-83hx6 In my project, I have a Header component that simply displays a fixed text and includes a console.log statement: const Header = props => { console.log("header render"); return ( <header> ...

Framer Motion does not support animations for exiting elements

Why is it that when I specify the exit property of framer motion to my HTML elements, they fail to animate upon being removed from the DOM? Here's an example of what my code looks like: <motion.div initial={{opacity: 0, y: -500}} animate={ ...

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

using spread operator to extract properties from API response objects

Currently undergoing a React/Next course, we recently had to retrieve data from an API that returns a list of objects containing information to populate the page. This task was accomplished using Next's getStaticProps method, passing the data to the ...

Creating a reusable input for the Griddle settingIconComponent in a Meteor and React application

Kindly share if it is doable or not. If yes, then how? Main Objective - To swap out the settings button in griddle with a material ui button using Griddle version 0.6.1 Approach - Replace the settings button that displays a list of columns to choose from ...

Push Button Unleashes a Cascade of Buttons

After creating a dropdown button, I encountered an issue where replicating it multiple times resulted in all the buttons on the page opening simultaneously. I initially thought that wrapping the button in a class called "dropdown" would prevent this from h ...

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

Tips for avoiding double reservations and creating time slots with nextjs and prisma

Welcome to my NextJS app booking system. As a beginner, I'm exploring how to create a website for simple bookings and have successfully connected it to Netlify. Currently, I can gather booking details such as time and name using Netlify forms. Howeve ...

Employing IF conditions within a form to refine options

I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen alon ...

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!

I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...

Typescript issues arise when a library lacks any available types for download

I attempted to incorporate the react-keydown library into my project, but encountered the following error: Could not find a declaration file for module 'react-keydown'. '/home/path../node_modules/react-keydown/dist/index.js' implicitl ...

Moving Configuration Files in NextJS

When working on a typical Next.js project, I often end up with several root-level configuration files: tsconfig.json next.config.js next-seo-config.ts .eslintrc etc... I am looking to tidy up my root directory by moving these files into their own separat ...

What is the process for showcasing specific Firestore items on a webpage?

database I've encountered an intriguing bug in my code that is proving difficult to resolve. The code involves a straightforward setup with React and Firestore, where items are listed on one page and their details are displayed on the next. However, t ...

Challenges arise when attempting to share a theme across different repositories within a Storybook monorepo that utilizes

In my unique project setup, I have a singular repository containing atoms, molecules, and organisms along with storybooks to develop a custom components library. This library is based on MUI framework with a customized theme applied, all built with TypeScr ...

Explore creating a dial number using React

Hey there, I'm currently working on developing a component. Just to clarify, I am not using react-native for this project. Instead, I would like to utilize React to scroll a number similar to how an image scrolls. The goal is to have the number smoo ...

Exploring the Size and Composition of Next Js Bundles

After upgrading to Next JS 9.0, I noticed a new feature during the build process that displays the size of compiled pages. Most pages are within the range of 20-30k, but those using Formik tend to be larger, sometimes double in size. The issue arises with ...