SASS error import 'variables'. SassError: Can't find stylesheet to import

Question

I am facing a certain problem. I was trying to send the html and CSS documents into my react project. The problem is

    ./src/scss/app.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/scss/app.scss)
    SassError: Can't find stylesheet to import.
      ╷
    1 │ @import 'variables';
      │         ^^^^^^^^^^^
      ╵
      src\scss\components\_header.scss 1:9  @import
      src\scss\components\_all.scss 1:9     @import
      src\scss\app.scss 5:9                 root stylesheet

Original Error Image screenshot

Answer 1

You should import it with the complete path and the extension of the file. For example:

@import './variables.scss';

If you are using create-react-app or node you might want to check if you have node-sass installed. More info here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/