Sass loader errors when running npm run dev

[caseytrombley]

Several errors when trying to run this repo. I have installed all packages, can't get this to run:

error in ./src/templates/NotFound.vue?vue&type=style&index=0&id=7bd9c884&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

background: linear-gradient( ^ Undefined variable: "$color-rich-black". in /Users/caseytrombley/Development/algaecal/design_system/src/templates/NotFound.vue (line 54, column 29)

@ ./node_modules/vue-style-loader!./node_modules/css-loader??ref--9-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-2!./node_modules/sass-loader/lib/loader.js??ref--9-3!./node_modules/sass-resources-loader/lib/loader.js??ref--9-4!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/NotFound.vue?vue&type=style&index=0&id=7bd9c884&lang=scss&scoped=true& 4:14-449 14:3-18:5 15:22-457 @ ./src/templates/NotFound.vue?vue&type=style&index=0&id=7bd9c884&lang=scss&scoped=true& @ ./src/templates/NotFound.vue @ ./src/templates sync .vue$ @ ./src/system.js @ ./src/main.js

error in ./src/elements/Button.vue?vue&type=style&index=0&id=08690ba1&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

display: inline-flex; ^ Undefined variable: "$space-m". in /Users/caseytrombley/Development/algaecal/design_system/src/elements/Button.vue (line 97, column 24)

@ ./node_modules/vue-style-loader!./node_modules/css-loader??ref--9-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-2!./node_modules/sass-loader/lib/loader.js??ref--9-3!./node_modules/sass-resources-loader/lib/loader.js??ref--9-4!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/Button.vue?vue&type=style&index=0&id=08690ba1&lang=scss&scoped=true& 4:14-447 14:3-18:5 15:22-455 @ ./src/elements/Button.vue?vue&type=style&index=0&id=08690ba1&lang=scss&scoped=true& @ ./src/elements/Button.vue @ ./src/elements sync .vue$ @ ./src/system.js @ ./src/main.js

error in ./src/elements/Heading.vue?vue&type=style&index=0&id=f818c0ba&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

font-weight: $weight-semi-bold; ^ Undefined variable: "$space-m".

[ericraio]

This issue occurs for me also.

[elevatebart]

Thank you @ericraio

This issue can be annoying indeed.

@viljamis, I believe this PR should fix it. What do you think?

[juanbrujo]

many hours or research later, replaced node-sass with dart-sass (or just sass) it was 15 mins replacing some @media variables and now works like a charm in Linux.