Question 219909 in CSS Question posted in
Some basic documentation can be found here.

SCSS/SASS not working in MicroFront End using React

Hello I am new to MicroFront End in React JS. I am trying to work on SCSS with MicroFront End in React JS. I have 2 files.

1: _variable.scss
2:style.scss

below is my code which I want to work in my application.

//_variable.scss

$base-color: #c6538c;

:export{
    baseColor:$base-color;
}



//style.scss

@import url('_variable.scss');

body{
    background: $base-color;
}

I am assigning a background value to Body of the application. but it is not working.

Any help would be Great.

Thank you.

Tags:

2

Answers


  1. 0

    If you take a look at this thread
    You see that you don’t need to use the url() method, Try changing your style.scss file to

    @import '_variable';

body {
    background: $base-color;
}
    Login or Signup to reply.
  2. 0

    Actually, you don’t need to explicitly export your variable. So, what you can do is:

    //variable.scss

$base_color: #c6538c;

    and:

    //style.scss

@import 'variable.scss';

body{
    background: $base_color;
}

    Also be careful with importing:

    • if "style.scss" is in the same directory with "variable.scss" then you should import like this:

      @import "./variable.scss"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search