I am using FileName.module.scss to style my react elements like so:
// this is my component
import React from "react";
import Aux from '../../hoc/Aux';
import classes from './Layout.module.scss';
const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
export default layout;
This is my SCSS:
.Content {
margin-top: 72px;
color:red;
}
I don't know why but the scss is not being applied to my main element, any ideas? Thank you!
You will have to install node-sass in order to work with scss files.
npm install node-sass --save-dev
Your code seems to be alright as post React 16.8 you can use css and scss modules without configuring webpack. I would suggest you check your version of React first. If you are using a version of React < 16.8 then you would have to eject and configure your webpack in order to use css and scss modules.