SassError: file to import not found or unreadable - when using @import in scss file

Describe the bug My project is using react (not using create-react-app) with nextjs.

When I run story book I get an error on a line in my component scss file where I import a common scss file.

My banner component has a style.scss file in the same directory, and it gets imported like this: import s from “./style.scss”;. My style.scss contains @import “variables”; where I have common styles; the variables file is in src/_variables.scss.

My source tree looks like this

• src/ – components/ — common/ ---- banner/ ---- index.tsx ---- styles.scss – styles/ – _variables.scss

To Reproduce

• npx -p @storybook/cli sb init --use-npm
• npm run storybook

Please let me know if more information is needed. Trying to be as detailed as I can.

Expected behavior Storybook should know how to import other scss files. Add any other context about the problem here.

Code snippets .babelrc

{
    "presets": [
        [
            "next/babel",
            {
                "transform-runtime": {
                    "useESModules": false
                },
                "preset-env": {
                    "targets": {
                        "browsers": [">0.03%"]
                    },
                    "useBuiltIns": "usage",
                    "corejs": 2
                }
            }
        ]
    ],
    "plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src"
            }
        ]
    ]
}

next.config.js

const path = require("path");
const withSass = require("@zeit/next-sass");
const withTM = require("next-transpile-modules");
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins');
const withOffline = require('next-offline');

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  //bundle analyzer
  enabled: process.env.ANALYZE === "true"
});

const nextConfig = {
  distDir: "../build",
  useFileSystemPublicRoutes: false,
  pageExtensions: ["jsx", "js", "tsx", "ts"],
  webpack: (config) => {
    config.plugins = config.plugins || [];

    config.plugins = [
      ...config.plugins
    ];

    // config.resolve.alias['helpers'] = path.join(__dirname, 'src/helpers')

    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js'] && !entries['main.js'].includes('./client/polyfills.js')) {
        entries['main.js'].unshift('./client/polyfills.js');
      }
      return entries;
    };

    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('.scss')) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return { loader: useRule };
          }

          if (useRule.loader.startsWith('css-load{
    "presets": [
        [
            "next/babel",
            {
                "transform-runtime": {
                    "useESModules": false
                },
                "preset-env": {
                    "targets": {
                        "browsers": [">0.03%"]
                    },
                    "useBuiltIns": "usage",
                    "corejs": 2
                }
            }
        ]
    ],{
    "presets": [
        [
            "next/babel",
            {
                "transform-runtime": {
                    "useESModules": false
                },
                "preset-env": {
                    "targets": {
                        "browsers": [">0.03%"]
                    },
                    "useBuiltIns": "usage",
                    "corejs": 2
                }
            }
        ]
    ],
    "plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src"
            }
        ]
    ]
}
    "plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src"
            }
        ]
    ]
}er')) {
            return {
              oneOf: [
                {
                  test: new RegExp('alice-carousel.scss$'),
                  loader: useRule.loader,
                  options: { ...useRule.options, modules: false, url: false },
                },
                {
                  loader: useRule.loader,
                  options: useRule.options,
                },
              ],
            };
          }

          return useRule;
        });
        delete rule.use;
      }
    });

    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: "empty"
    };
    return config;
  }
};

module.exports = withPlugins([
  withBundleAnalyzer,
  withImages,
  withOffline, {
    generateSw: true,
    dontAutoRegisterSw: false
  },
  [
    withSass, {
      cssModules: true,
      sassLoaderOptions: {
        includePaths: ["./src/styles"]
      },
      cssLoaderOptions: {
        localIdentName: "[local]___[hash:base64:5]"
      }
    }
  ],
  [
    withTM, {
      transpileModules: [
        "express-http-context",
        "ip-regex",
        "is-ip",
        "logform",
        "winston-transport",
        "triple-beam",
        "intersection-observer-polyfill",
        "react-intersection-observer"
      ]
    }
  ]
], nextConfig);

Error after running `npm run storybook

ERROR in ./src/components/Common/Banner/style.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--10-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--10-4!./src/components/Common/Banner/style.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: variables.
        on line 1 of /home/adelamarre/dev/mobileProj/mobileweb/src/components/Common/Banner/style.scss
>> @import "variables";

   ^

 @ ./src/components/Common/Banner/style.scss 1:14-338 20:4-31:5 23:25-349
 @ ./src/components/Common/Banner/index.tsx
 @ ./src/stories/banner.stories.js
 @ ./src/stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./src/components/Common/Banner/index.tsx
Module not found: Error: Can't resolve '~/helpers/icons' in '/home/adelamarre/dev/mobileProj/mobileweb/src/components/Common/Banner'
 @ ./src/components/Common/Banner/index.tsx 4:0-36 69:15-20
 @ ./src/stories/banner.stories.js
 @ ./src/stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Here is what my imports look like in my component

import React from "react";
import s from "./style.scss";
import Icons from "~/helpers/icons";
...

My style.scss has the following line @import "variables";

variables

System:

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
  npmPackages:
    @storybook/addon-actions: ^5.2.8 => 5.2.8 
    @storybook/addon-links: ^5.2.8 => 5.2.8 
    @storybook/addons: ^5.2.8 => 5.2.8 
    @storybook/react: ^5.2.8 => 5.2.8 

[bburke4]

@number33 @rurusyu I fixed this in my use case by pushing my stylesheets dir onto resolve.modules.

Then I could do imports like this: @import '~shared/variables';

  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // necessary to support dynamic ~ imports (e.g. @import '~shared/variables')
    // otherwise sass-loader cannot find the module to import
    config.resolve.modules.push('app/client/stylesheets');

    return config;
  }

Also, @number33 shouldn’t you drop the slash from this import… import Icons from "~/helpers/icons"; because ~/ points to your home directory.

[alanwilter]

I came across a similar issue, for which I have no solution, but I can point the cause: My files used to be CRLF:

$ file _components.scss
_components.scss: ASCII text, with CRLF line terminators

After some git maintenance, as I work on a Mac/Linux, all CRLF files were converted to LF and now I get this error.