Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When using sass, how to import sass variables?

See original GitHub issue

Hi, first of all thanks for such a great react development setup & build automation tool.

When using create-react-app with node-sass. How to expose sass variables to my project? Can’t get my head around…

My folder structure for the reference:

└───src
    ├───app
    │    └───variables.scss // here are all my vars
    ├───components
    │   └───Header // there is Header.scss in this folder, where I need to use my variables
    ├───helpers
    ├───public
    └───utils

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:13 (5 by maintainers)

Top GitHub Comments

18reactions

gaearoncommented, Feb 24, 2017

Couldn’t you also @import "../../variables.scss"; or equivalent from any component’s Sass file that needs them?

14reactions

viankakrisnacommented, Feb 22, 2017

one way to do it is just import any scss file from your root index.scss

so rather than placing import './Header.css'; in Header.js You do

@import "./app/variables.scss";
@import "./components/Header/Header.scss";

in index.scss

and import './index.css' in index.js

Top Results From Across the Web

Sass: @import

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining ......

css - SASS - use variables across multiple files - Stack Overflow

You need to import (using @use ) the partial SASS file into each SASS file that uses it - not just your main...

SASS | Use variables across multiple files - GeeksforGeeks

To import multiple sass partials with @import by adding @import followed by first filename within quotes then comma(, ) then followed by second ......

Sass @import and Partials - W3Schools

You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables,...

Variables in @import · Issue #279 · sass/sass - GitHub

@niklas-r, if you're trying to import an .scss file from Bower, you should store bower_components outside of your Sass subfolder and add path...