SCSS/SASS not working in MicroFront End using React

Question

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.

score 0 · Answer 1 · answered Jul 31 '23 at 09:23

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;
}

answered Jul 31 '23 at 09:23

Joerie

Thank you for you answer. I tried, but it is not working. – Bhavin Shah Jul 31 '23 at 09:28
How about changing the `background: $base-color;` to `background: $baseColor;` in style.scss – Joerie Jul 31 '23 at 13:50
I did. but it is not working. – Bhavin Shah Aug 01 '23 at 04:21

score 0 · Answer 2 · answered Jul 31 '23 at 14:21

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"

answered Jul 31 '23 at 14:21

Lilly

Thank You for your answer. but it is not working.. I have implemented MicroFrontEnd so may be that is the case , is it not working ? – Bhavin Shah Aug 01 '23 at 04:21
@BhavinShah if that's the case you can try to import "style.scss" into that particular layout or into the main file where your html is located for that particular frontEnd. – Lilly Aug 01 '23 at 08:57

2 Answers2