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:

    │    └───variables.scss // here are all my vars
    │   └───Header // there is Header.scss in this folder, where I need to use my variables

Issue Analytics

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

github_iconTop GitHub Comments

gaearoncommented, Feb 24, 2017

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

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

Read more comments on GitHub >

github_iconTop 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 ......
Read more >
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...
Read more >
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 ......
Read more >
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,...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found