Unable to import sass files in new React application

Question

I am trying to use sass with react, but none of my sass files are loading. I did not use create-react-app to start this project, I started it from scratch using web pack and npm init.

When I try to use a variable, like $titleColor, I get an error,

"Uncaught ReferenceError: $titleColor is not defined".

There are no import errors, and all imported paths are successfully loaded. There are no compile errors either--if I don't try to access $titleColor, my app works fine.

Here is my code:

// index.html:
<link rel="stylesheet" href="/src/assets/styles/app.scss">
<link rel="stylesheet" href="/src/assets/styles/colors.scss">

// app.scss
@font-face {
 font-family: "San Francisco";
 font-weight: 400;
 src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

@import "./colors.scss"

// colors.scss
$titleColor: 'rgba(211,64,80,1.0)';

// menuSection.js, a React Component
import '../../assets/styles/colors.scss'

// web pack config
module: {
rules: [
  {
    test: /\.scss$/,
    use: ["sass-loader"]
  }
 ]
}

Possible duplicate of [How to include SCSS file in HTML](https://stackoverflow.com/questions/15063834/how-to-include-scss-file-in-html) — Chaitanya, Jul 21 '19 at 06:49

score 1 · Answer 1 · answered Jul 22 '19 at 07:28

please try in this way, 1. install 'npm install node-sass --save'. 2. rename app.css file to app.scss 3. create a new file with name variable.scss and put your title color like $titleColor: #aeaeae; 4. import this color in app.scss with @import "variables.scss". 5. then use your $titleColor like 'background-color: $titleColor'.

Chaitanya · Answer 2 · 2019-07-21T06:54:38.623

You cannot "attach" a SASS/SCSS file to an HTML document.

Try to compile into a CSS and attach that css file to HTML document

How to include SCSS file in HTML

and $titleColor error is because of global variables file is not included or global variable $titleColor is not defined in your project, search for $titleColor in your project and make sure it is included in your .scss file

Check the usage of SCSS variales

Yilmaz · Answer 3 · 2019-07-26T01:18:28.140

you installed only-sass loader. this just tells webpack to recognize .scss files. you have to tell webpack evrything step by step. I assume you already installed node-sass as well because sass-loader requires it.

you need to install css loader and style loader. css loader takes your css and turns it to javascript code inside the bundle.js. style loader will take that javacript code and inject it into the DOM. after you installed, add them to webpack.config.js like so:

module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },

rules are the kinda to do list for webpack. each rule is defined in an object. test will tell webpack whenever it sees this type of file, do what loaders say. if you have only one loader u define just like loader:"". if you have an array of loaders u use use:[]. you have to be aware that there is an order to this array in .scss rule.

css-loader is translator, style-loader is injector. it seems like first you have to translate and add css-loader first. but actually they load in reverse order.

in your index.html you do not need to link any css file. style-loader will handle it.

Unable to import sass files in new React application

3 Answers3