Next 9 - File to import not found or unreadable: _variables.sass.

Hi! I’ve followed the advanced instructions to install the components for next.js but am still failing to correctly import the variable sass file. Its a next.js 9 app created with creat-next-app. On yarn dev I get the following stack trace:

ModuleBuildError: Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "_variables.sass"
^
      File to import not found or unreadable: _variables.sass.
      in /Users/richard/Documents/code/oddsjar/node_modules/react-bulma-components/src/components/utils.sass (line 3, column 1)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:2271:31)
    at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:969:16)
    at options.error (/Users/richard/Documents/code/oddsjar/node_modules/node-sass/lib/index.js:294:32)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/richard/Documents/code/oddsjar/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:112:14
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1414:32

I’ve tried to follow all the similar issues in the repo but none have yet solved the problem, the only difference I can see is that I am using nextjs 9. I’ve setup a demo repo here https://github.com/RichAWarren/react-bulma-next-9

Thanks in advance!

[mrd9483]

@humet

I spent around an hour playing with your code, and there seems to be an inconsistency with the way _variables.sass is served up, at least in next. I tried erasing node_modules and .next folders and rebuilding/running a bunch, and it would work 10% of the time.

What I was able to eventually get to work consistently was move _variables.sass to the root folder. I was able to build and run every time this way. I tried it on your project and mine as well, seems to be doing the trick. Would love to know why the inconsistent behavior though…

[mrd9483]

After following all of the documentation, changing @import "_variables.sass" to @import "~_variables.sass" in src/components/utils.sass works.

It seems to have something to do with the aliasing in next.js.

The solution above isn’t good, as I’m directly changing a file within the node module, and I don’t know enough about this to make an informed pull request.