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

user_17319767 0
Viewed 5394

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

reactjs sass css html
2 Answers
user_172823010

EDIT:

I added an answer below that is probably unrelated to your use case, but as I started looking at your screenshot more it looks like your file is named _variables.scss which is a partial and is imported with the @use rule. Can you try @use "variables";? https://sass-lang.com/guide

ORIGINAL ANSWER:

I experienced this issue running Storybook with Nx and sass-loader:

ModuleBuildError: Module build failed (from ../../../node_modules/@nrwl/web/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "variables";
  │         ^^^^^^^^^^^

Changing to a relative import worked, but I had @import "variables" all over my code and didn't want to have to change to @import "../../../styles/variables.scss" everywhere. I was finally able to resolve it by adding an alias to the webpack config via webpackFinal in .storybook/main.js:

// .storybook/main.js

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      'variables': path.resolve(__dirname, '../styles/variables.scss')
    }
    return config;
  },
};

versions used:

"@nrwl/cli": "13.2.3"
"@nrwl/storybook": "13.2.3"
"@storybook/addon-essentials": "6.3.0"
"@storybook/builder-webpack5": "6.3.0"
"@storybook/manager-webpack5": "6.3.0"
"@storybook/react": "6.3.0"
"sass-loader": "13.0.0"

webpack resolve alias documentation: https://webpack.js.org/configuration/resolve/#resolvealias

user_50506220
Related