When using SASS how can I import a file from a different directory?

import sass
spaaarky21 picture spaaarky21 · Jun 28, 2011 · Viewed 114.3k times · Source

In SASS, is it possible to import a file from another directory? For example, if I had a structure like this:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss could import _common.scss using @import "common" but is it possible for more_styles.scss to import _common.scss? I tried a few different things including @import "../sub_directory_a/common" and @import "../sub_directory_a/_common.scss" but nothing seems to work.

Answer

Oliver picture Oliver · Sep 13, 2013

Looks like some changes to SASS have made possible what you've initially tried doing:

@import "../subdir/common";

We even got this to work for some totally unrelated folder located in c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Just add enough ../ to be sure you'll end up at the drive root and you're good to go.

Of course, this solution is far from pretty, but I couldn't get an import from a totally different folder to work, neither using I c:\projects\sass nor setting the environment variable SASS_PATH (from: :load_paths reference) to that same value.

Related questions

Is it possible to import a whole directory in sass using @import?

I am modularizing my stylesheets with SASS partials like so: @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues is there a way …

Read More
Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'm not sure where …

Read More
@import in @if statement in Sass

I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css. I have the following …

Read More