Next 9 - File to import not found or unreadable: _variables.sass.
See original GitHub issueHi! 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!
Issue Analytics
- State:
- Created 4 years ago
- Comments:18 (8 by maintainers)
Top Results From Across the Web
SassError: File to import not found or unreadable: style.scss
I am trying to setup a vuejs project from scratch. I am getting this error when I import "style.
Read more >Error: File to import not found or unreadable: bootstrap - Drupal
Error: File to import not found or unreadable: bootstrap. Active. Project: ... For line 9 of import.scss = @import "bootstrap";
Read more >file to import not found or unreadable - Visual Studio Feedback
Its a normal Web App (WinForms) using VB.NET with a CSS folder where I was adding the SCSS files. Example: css mixins.scss variables.scss...
Read more >File to import not found or unreadable - Laracasts
I've looked around and found a few solutions to this, but none match what I need. Copy Code { Error: resources/assets/sass/app.scss Error: File...
Read more >Editing CSS and SASS - Error: File to import not found or ...
Error: File to import not found or unreadable: susy. Parent style sheet: /var/www/html/omeka-s/themes/default/asset/sass/style.scss
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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…
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.