CODEWITHSUNDEEP
csssass
Jeeshan
Jeeshan

Reputation: 65

Why my main.scss could not import other files

I am having a problem in importing scss file.

I created a file, named, main.scss and write some code there.

All codes are working fine and reflecting the webpage.

then I created two folders, settings, and elements.

In settings, I created a file named, _colors.scss and defined some colors variable.

In elements, I created a file, named, _typography.scss and defined some code.

Now I wanted to import them into main.scss

but they couldn't import. I don't know why. Kindly help 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);

Upvotes: 1

Views: 103

Answers (1)

Arseniy-II
Arseniy-II

Reputation: 9167

Your path is incorrect. Try this:

/src/css/main.scss

@import "./settings/_colors";
@import "./elements/_typography";

Also note that @import "./settings/_colors"; goes first. Because you need your $primary-colour inside @import "./elements/_typography";

Upvotes: 2

Related Questions