title: React: sass-loader not transpiling SCSS into CSS
body: <p>I have a <code>react</code> app with <code>CSS</code> files working fine.<br/>
  I need to start using <code>SCSS</code> so the following changes:</p>
  
  <ol>
  <li>Install <code>node-sass</code> and <code>sass-loader</code></li>
  <li>Change the imports from <code>.css</code> to <code>.scss</code></li>
  <li>Change file extension from <code>.css</code> to <code>.scss</code></li>
  </ol>
  
  <p>But my pages are not loading properly:</p>
  
  <p>Current behavior: <img src="https://i.stack.imgur.com/gJp1G.png" alt="enter image description here"></p>
  
  <p>Expected behavior: <img src="https://i.stack.imgur.com/zTAHv.png" alt="enter image description here"></p>
  
  <p>My code:</p>
  
  <p><code>package.json</code></p>
  
  <pre><code>{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@coreui/coreui": "^3.0.0",
      "@stardust-ui/docs-components": "^0.40.0",
      "axios": "^0.19.0",
      "bootstrap": "^4.4.1",
      "compass": "^0.1.1",
      "css-loader": "^3.4.2",
      "mdbreact": "^4.25.4",
      "prettier": "^1.6.1",
      "prop-types": "^15.7.2",
      "react": "^16.10.2",
      "react-bootstrap": "^1.0.0-beta.16",
      "react-bootstrap-sidebar": "0.0.1",
      "react-dom": "^16.10.2",
      "react-fixed-bottom": "^1.0.2",
      "react-modal": "^3.11.1",
      "react-rangeslider": "^2.2.0",
      "react-router-dom": "^5.1.2",
      "react-scripts": "^1.1.5",
      "reconnecting-websocket": "^4.2.0",
      "reconnectingwebsocket": "^1.0.0",
      "semantic-ui-react": "^0.88.2",
      "style-loader": "^1.1.3",
      "styled-components": "^4.4.1"
    },
    "scripts": {
      "start": "PORT=3000 react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    },
    "devDependencies": {
      "node-sass": "^4.13.1",
      "sass-loader": "^8.0.2"
    }
  }
  </code></pre>
  
  <p>I injected the code for the loaders in node_modules/react-scripts/config/webpack.config.dev.js like this:</p>
  
  <pre><code>// Process JS with Babel.
            {
              test: /\.(js|jsx|mjs)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                // @remove-on-eject-begin
                babelrc: false,
                presets: [require.resolve('babel-preset-react-app')],
                // @remove-on-eject-end
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
              },
            },
            { 
              test: /\.scss$/, 
              loader: [
                "css-loader",
                "sass-loader"
              ]
            },
  </code></pre>
  
  <p>Here is my component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import '../../../general.scss';
  import { Warning } from '../../../images/images_svg';
  
  class Terminos extends Component{
    state = { error: false }
  
    saveAndContinue = () =&gt; {
      if(this.props.values.terminos) {
         this.props.nextStep()      
      }
      else {
         console.log(this.props.values.terminos_error)
         this.props.mandar_error('terminos_error')
      }     
    }
  
    render() { 
      return (
        &lt;div className="formulario"&gt;
          &lt;div className="formulario-seccion-titulo"&gt;
            &lt;div className="formulario-seccion-barrita"/&gt;
              &lt;div className="formulario-seccion-content"&gt;
                 Presentacion
              &lt;/div&gt;
            &lt;/div&gt;      
            &lt;div className={this.props.values.terminos_error ? "formulario-seccion" : "formulario-seccion-red"}&gt;
               La actual pandemia que afecta al mundo trae consecuencias a nivel sanitario, económico y social. Lo que está ocurriendo con el COVID impacta de lleno, no sólo en la salud física de las personas, sino que también afecta de forma clara y contundente su salud mental.&lt;br/&gt;&lt;br/&gt;
               Ud. puede decidir si contestar o no la encuesta que sigue pero de hacerlo,acepta que los resultados de la misma sean compartidos con su empleador con el único fin de brindarle contención y asistencia. La encuesta debe completarse en las próximas 10 horas.&lt;br/&gt;&lt;br/&gt;
               &lt;input type="checkbox" 
                 id="terminos" 
                 className="formulario-checkbox"
                 onChange={() =&gt; this.props.handleTerminos()}
                 checked={this.props.values.terminos}
               /&gt;  
               &lt;label className="formulario-checkbox-label" htmlFor="terminos"&gt; 
                 Acepto terminos y condiciones.
               &lt;/label&gt;
               {this.props.values.terminos_error===false &amp;&amp;
                  &lt;div className="formulario-seccion-error"&gt;
                    &lt;div className="formulario-seccion-error-logo" &gt;
                      &lt;Warning color="#d93025"/&gt;
                    &lt;/div&gt;
                      Debes aceptar los terminos y condiciones para continuar
                  &lt;/div&gt;
                }
             &lt;/div&gt;
             &lt;div className="formulario-footer"&gt;
               &lt;button className="formulario-botones" onClick={this.saveAndContinue}&gt;Siguiente&lt;/button&gt;
             &lt;/div&gt;
           &lt;/div&gt;
         )    
      }
  }
  
  export default Terminos;
  </code></pre>
  
  <p>If I change the import and the file extension from <code>.scss</code> to <code>.css</code> the page load properly.<br/>I´m using <code>npm start</code> to develop and testing the code. </p>