Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file.

First, I created a file called main.scss and added some code to it.

All the codes are functioning properly and showing up on the webpage.

Next, I created two folders named settings and elements.

In the settings folder, I made a file named _colors.scss where I defined some color variables.

Then, in the elements folder, I created a file called _typography.scss and wrote some code in it.

Now, when I tried to import them into main.scss,

they didn't get imported. I'm unsure why this is happening. Can someone please assist me?

Here is my final code:

/src/css/main.scss:

@import "elements/typography";

@import "settings/colors";

/src/css/elements/_typography.scss
:

a {
    line-height: inherit;
    cursor: pointer;
    border-bottom: 1px solid;
    text-decoration: none;
    color: $primary-colour;
    word-break: break-all;
    word-break: break-word;
    &:visited {
        border-bottom: 1px solid;
    }
    &:hover {   
        border-bottom: none;
    }
    &:active {   
        color: $primary-colour;      
    }
    &:focus {   
        border: none; 
    }
}

/src/css/settings/_colors.scss:

$primary-colour: rgb(32, 221, 174);

Answer №1

Your current route is not right. Consider the following path:

/src/css/main.scss

@import "./design/_colors";
@import "./layout/_typography";

Remember that @import "./design/_colors"; should come first. This is because you will need your $primary-color declared before using it in @import "./layout/_typography";

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

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

I've integrated the twitter bootstrap sass 3.0.3.0 gem, which is supposed to be the latest version of twitter bootstrap 3.0.3. I'm trying to customize the colors using the 'customize' section of the LESS variables, but I can't seem ...

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

Is it possible to convert the text.json file into a jQuery animation?

Looking to extract information from text.json and integrate it with my jquery.animation(). My goal is similar to the one demonstrated here. Instead of using "data" attributes like in that example, I want to parse the text based on the "ID" property as a k ...

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

Revamp the website to create a more streamlined and compact version that mirrors the functionality of the desktop website

My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect. I aim to achieve the same con ...

Including new styles in CKEDITOR.stylesSet that pertain to multiple elements

My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...

Changing the position from fixed to static

It's strange, but for some reason when I attempt to apply position:fixed using jQuery: $('#footer').css('cssText', 'position:fixed !important;'); to my footer, the result on the page is different: <div id="footer" ...

Maintain a consistent size for the material UI drawer, preventing it from resizing when the content size fluctuates

Incorporating Material UI into my project, I decided to use a drawer for navigation. However, within the drawer, there are Collapsible lists that expand when clicked. The issue arises when the list text items are lengthy, causing the drawer to unexpectedly ...

Synchronize CSS Properties with JavaScript Event

Is there a more efficient way to synchronize two properties using JavaScript or JQuery? For instance, when I have an editable text field and I switch it to an input box upon double click, how can I ensure that the input box adjusts its size along with the ...

HTML5 enables users to pick their preferred font style

In my JavaScript and HTML5 course, I am working on developing a website where users can choose the background color and decide between using SANS SERIF or SANS fonts. The background color selection feature is already functioning successfully -- var inputC ...

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

WordPress WooCommerce causing the right bar to be pushed below

I'm currently facing an issue on my WordPress site with a purchased template and Woocommerce integration. The problem lies in the fact that the right sidebar gets pushed down on the shop page. When I reached out to the template developers, they sugges ...

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

Tips for choosing a table row that is not the first or last cell

#MyTable tr+tr:hover { background: #dfdfdf; } <table id="myTable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td>2</td> &l ...

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...