Undefined variable: "$theme-colors".

[ghost]

I copied the _variables.scss and _bootswatch.scss to my project and included it like this:

@import "_bootswatch_variables.scss";
@import "~bootstrap/dist/css/bootstrap";
@import "_bootswatch.scss";

I get this error:

Undefined variable: "$theme-colors".
      in E:\git\Frontend\src\styles\_bootswatch.scss (line 160, column 27)

Using the npm version like this works:

@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/flatly/bootswatch";

I really don't know why this happens oO

[dleffler]

What compiler are you using?

[henhen724]

I am having a similar error. Error: Undefined variable. font-size: $font-size-sm; ^^^^^^^^^^^^^ source_bootswatch.scss 13:14 root stylesheet

I am using dart2js 2.1.0 .

I am using the command "sass source/_bootswatch.scss:default-bootstrap.css --load-path="source/_variables.scss".

[henhen724]

The issue was import statement order.

[elliot-sawyer]

I am having the same issue with 4.2.1

@henhen724 what did you change about the import statement order to get it to work?

I'm trying to run this against a Vue cli-generated project with sass-loader. Here is my code:

import "bootswatch/dist/yeti/_variables.scss";
import "bootstrap/scss/bootstrap.scss";
import "bootswatch/dist/yeti/_bootswatch.scss";

I get this error:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src??ref--3-2!./node_modules/sass-loader/lib/loader.js!./node_modules/bootswatch/dist/yeti/_bootswatch.scss
Module build failed: 
  font-size: $font-size-sm;

[henhen724]

You're issue is different you should write:

import "bootswatch/dist/yeti/variables.scss";
import "bootstrap/scss/bootstrap.scss";
import "bootswatch/dist/yeti/bootswatch.scss";

Underscores just let sass know that the file is partial you don't include them in imports.

[henhen724]

I actually believe this is the same issue that the original post is having. This issue can be closed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.