Maybe it will sound dummy but I would like to use SCSS in my React app for styling.
I know that React will "read" all my styles and generate them in separate <style> tags in the <head> section.
I already eject this app and configure the webpack.config file to use scss.
Is there a way (or best practice maybe) to use them as an external css file?
this is what i would like to get
<!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" />
.
.
.
instead of 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>
So I would like to have one mystyles.scss file which contains all my other scss files like this:
mystyles.scss
@import variables.scss;
@import components.scss;
and React will generate an external css file and when I modify any styles, the create-react-app cli will live reload it.
Edit
I would like to use react like this, because in my opinion it is easier to debug the styles with chrome inspect tool. It could show me which scss file has this style.
But if you have a better solution for debugging scss in React, I'm open for it!