Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I have already used the "eject" command on this app and configured the webpack.config file to support SCSS.
Is there a recommended way or best practice to utilize SCSS as an external CSS file?
This is what I envision:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="mystyles.css" />
.
.
.
As opposed to this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style> <!-- my styles --> </style>
<style> <!-- my styles --> </style>
I aim to have a single mystyles.scss file that imports all other scss files, like so:
mystyles.scss
@import variables.scss;
@import components.scss;
In this scenario, React would generate an external css file that is live-reloaded by the create-react-app CLI when any style changes are made.
Edit
I prefer using React in this manner because I find it easier to debug styles with the Chrome inspect tool. It provides insight into which SCSS file corresponds to each style. However, if you have a more effective solution for debugging SCSS in React, I am open to exploring it!