React，使用 sass 时出现错误

Question

当我去写一些class（在SASS文件中）的样式时，发生了错误。我已经安装了 node-sass。我不明白错误。我在下面给出了错误截图。

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.错误

Answer 1

如果您想使用大括号，您应该将文件重命名为 .scss。
根据 create-react-app docs，您应该使用 sass 包。运行终端中的那些行，你应该没问题：

npm un node-sass --save
npm i sass --save

Answer 2

.sass 文件使用旧的缩进语法编译。将文件重命名为 .scss 然后重试。我希望这个解决方案对你有所帮助。

Answer 3

尝试从您的 sass 文件中删除大括号，应该可以。注意 scss 和 sass 之间的区别。你在sass文件中写的是scss语法。

在这种情况下，这是您可以在文件中包含的示例代码：

.app__navbar
  width: 100%
  display: flex
  justify-content: space-between
  align-items: center

React，使用 sass 时出现错误

React, getting errors when using sass

css

sass

reactjs

node-sass

sass-loader