Search code examples
cssreactjssassnode-sasssass-loader

React, getting errors when using sass

When I go to write style in some class (in SASS file), error occurs. My have install node-sass. I do not understand error. I have given error screenshot below.

1. Navbar.jsx

import React from 'react'
import { images } from "../../constants";
import './Navbar.sass';

const Navbar = () => {
  return (
    <nav className='app__navbar'>
      <div className='app__navbar-logo'>
        <img src={images.logo} alt="logo" />
      </div>
      <ul className='app__navbar-links'>
        {["home", "about", "work", "skill", "contact"].map((item)=>(
          <li className='app__flex p-text' key={`link-${item}`}>
            {/* <div /> */}
            <a href={`#${item}`}>{item}</a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

export default Navbar;

2.Navbar.sass

.app__navbar {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. package.json

{
  "name": "frontend_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@sanity/client": "^3.1.0",
    "@sanity/image-url": "^1.0.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.2.6",
    "node-sass": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "5.0.0",
    "react-tooltip": "^4.2.21",
    "web-vitals": "^2.1.4"
  },

4. Errors

enter image description here

Solution

  • .sass files are compiled with the old indented syntax. Rename your file to .scss and try again. I hope this solution will help you.