React SASS - Error to install SASS Module-CodePudding

I'm trying to use SASS formatting in my React project but it's warning me that some files weren't found, but NPM installed everything automatically, so how can some files be missing. Does anyone have any suggestions on how to resolve these errors?

I tried to install 2 different SASS modules and they all got the same error:

npm install sass
npm install node-sass

My SASS code:

body {
  padding: 0;
  margin: 0;
}

button {
  background: none;
  border: none;
  outline: none;
  &:hover {
    cursor: pointer;
  }
}

.app {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board {
  .board-row {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #000;
    &:last-child {
      border-bottom: none;
    }
    .square {
      width: 80px;
      height: 80px;
      border-right: 2px solid #000;
      font-size: 2.5rem;
      padding: 0;
      overflow: hidden;
      transition: all 0.2s;
      &:last-child {
        border-right: none;
      }
    }
  }
}

Error being displayed:

./src/styles/root.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/styles/root.scss)
Cannot find module 'sass'
Require stack:
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\sass-loader\dist\utils.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\sass-loader\dist\index.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\sass-loader\dist\cjs.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\webpack\lib\NormalModule.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\webpack\lib\Compiler.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\webpack\lib\webpack.js
- C:\Users\StarWars\Desktop\React\tictactoe\node_modules\react-scripts\scripts\start.js

Thank You

CodePudding user response：

I had the same issue some times back but I did this and it worked-

npm cache clear --force npm install sass

This should work for you I hope

CodePudding user response：

this looks like a problem in your sass code itself. Can you post the contents of root.scss?

CodePudding user response：

sudo npm install --save-dev --unsafe-perm node-sass

sudo npm install --save-dev --unsafe-perm node-sass ...

you should try this !