In my current project using create-react-app, I decided to integrate SASS following the guidelines provided in this link: https://github.com/facebook/create-react-app
After setting up the structure with a style folder containing partials and an index.scss file, I encountered an issue where although the styles were being successfully imported into index.css, they weren't rendering on the browser. What could be causing this problem?
Below are snippets from my code:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './style/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
// index.scss
@import './partials/_firstComponent';
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
// firstComponent.scss
.firstComponent {
background-color: 'red';
}
// index.css
.firstComponent {
background-color: 'red'; }
body {
margin: 0;
padding: 0;
font-family: sans-serif; }