CODEWITHSUNDEEP
reactjswebpacksass
jjjjjjjj
jjjjjjjj

Reputation: 4483

Unable to import sass files in new React application

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"]
  }
 ]
}

Upvotes: 1

Views: 2962

Answers (3)

Yilmaz
Yilmaz

Reputation: 49182

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.

Upvotes: 0

Sunil_Banjare
Sunil_Banjare

Reputation: 111

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'.

Upvotes: 1

Chaitanya
Chaitanya

Reputation: 126

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

Upvotes: 0

Related Questions