Sass argument errors out of the box

[zreese]

I hit this when trying to run gulp sass. All dependencies are installed and up-to-date. Tried removing and reinstalling everything, same result. Tried trashing the repo and reinstalling, same result. My guess is that because $link-color is defined as theme-color("primary"), the quotes are making it appear as a string to sass... but that doesn't make sense, because that wouldn't be unique to my environment.

[13:12:00] Starting 'sass'...
{ [Error: src/sass/bootstrap4/_variables.scss
Error: argument `$color` of `darken($color, $amount)` must be a color

       Backtrace:
        src/sass/bootstrap4/_variables.scss:168, in function `darken`
        src/sass/bootstrap4/_variables.scss:168
        on line 168 of src/sass/bootstrap4/_variables.scss
>> $link-hover-color:      darken($link-color, 15%) !default;
   ------------------------^
]
  status: 1,
  file: 'understrap-child/src/sass/bootstrap4/_variables.scss',
  line: 168,
  column: 25,
  message: 'src/sass/bootstrap4/_variables.scss\nError: argument `$color` of `darken($color, $amount)` must be a color\n\n       Backtrace:\n       \tsrc/sass/bootstrap4/_variables.scss:168, in function `darken`\n       \tsrc/sass/bootstrap4/_variables.scss:168\n        on line 168 of src/sass/bootstrap4/_variables.scss\n>> $link-hover-color:      darken($link-color, 15%) !default;\n   ------------------------^\n',
  formatted: 'Error: argument `$color` of `darken($color, $amount)` must be a color\n\n       Backtrace:\n       \tsrc/sass/bootstrap4/_variables.scss:168, in function `darken`\n       \tsrc/sass/bootstrap4/_variables.scss:168\n        on line 168 of src/sass/bootstrap4/_variables.scss\n>> $link-hover-color:      darken($link-color, 15%) !default;\n   ------------------------^\n',
  messageFormatted: '\u001b[4msrc/sass/bootstrap4/_variables.scss\u001b[24m\nError: argument `$color` of `darken($color, $amount)` must be a color\n\n       Backtrace:\n       \tsrc/sass/bootstrap4/_variables.scss:168, in function `darken`\n       \tsrc/sass/bootstrap4/_variables.scss:168\n        on line 168 of src/sass/bootstrap4/_variables.scss\n>> $link-hover-color:      darken($link-color, 15%) !default;\n   ------------------------^\n',
  messageOriginal: 'argument `$color` of `darken($color, $amount)` must be a color\n\nBacktrace:\n\tsrc/sass/bootstrap4/_variables.scss:168, in function `darken`\n\tsrc/sass/bootstrap4/_variables.scss:168',
  relativePath: 'src/sass/bootstrap4/_variables.scss',
  name: 'Error',
  stack: 'Error: src/sass/bootstrap4/_variables.scss\nError: argument `$color` of `darken($color, $amount)` must be a color\n\n       Backtrace:\n       \tsrc/sass/bootstrap4/_variables.scss:168, in function `darken`\n       \tsrc/sass/bootstrap4/_variables.scss:168\n        on line 168 of src/sass/bootstrap4/_variables.scss\n>> $link-hover-color:      darken($link-color, 15%) !default;\n   ------------------------^\n\n    at options.error (understrap-child/node_modules/node-sass/lib/index.js:291:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }
[13:12:00] Finished 'sass' after 281 ms

[zreese]

Well, maybe it's not unique to my environment... it looks like Bootstrap v4.0.0 beta renamed a ton of variables: https://github.com/twbs/bootstrap/issues/21568

[holger1411]

I´am working on it. You can already download the bleeding edge version of the parent theme here: https://github.com/holger1411/understrap/archive/master.zip

BS4 Beta was released today. So give me some time ;-)

UnderStrap 0.6.3 will be released soon. A new child theme version will follow

[l1un]

I'm getting (maybe) a similar? error with a new local test install:

{ Error: sass/assets/bootstrap4.scss Error: File to import not found or unreadable: ../../src/sass/bootstrap4/custom.

I tried commenting out the request to see if I could temporary over-ride it but more errors continue looking for non-existent files. Is this related to the needed updates or potentially something on my end?

[holger1411]

Make sure that the /src folder is present. If not: Run npm install in your terminal within the themes root directory.

[alexleybovich]

I encountered the same issue as OP and derekh. dropped the child theme in, ran npm install, and received the error that the following files are not found:

../../src/sass/bootstrap4/custom ../../src/sass/bootstrap4/normalize ../../src/sass/bootstrap4/responsive-embed

all in the sass/assets/bootstrap4.scss file

[holger1411]

Okay, seems I add the new Bootstrap 4 Beta dependencies to the download file available on understrap.com, but forgott to commit the update to the child themes package.json here on Github

So a npm installstill installs the old Alpha version of Bootstrap 4, while the new sass files waits for the new sass structure of BS4Beta if you use the package from Github

Sorry!

I release a quick fix a few minutes ago, v0.3.3.2: https://github.com/holger1411/understrap-child/releases/tag/0.3.3.2

[l1un]

The hotfix worked for me, thanks @holger1411 appreciate it.

[holger1411]

There is already a new version out: https://github.com/holger1411/understrap-child/releases/tag/0.3.4 Update to it if you have problems with your dropdowns

[holger1411]

I´ve updated UnderStrap to 0.6.5 and the child theme to 0.3.5. Pls try it again with this new versions if you have still issues

[jeffreyvr]

What I've done so far;

• Install the parent theme (v0.6.5) (run npm install)
• Install child theme (v0.3.5) (run npm install)
• Activated the child theme in my WordPress installation

I then changed the $body-bg variable in _child_theme_variables.scss and ran the gulp command and this works. However, I don't seem to be able to change the theme colors without running into an error.

My _child_theme_variables.scss file:

$body-color: #313132;

$red:     #dc3545;

$theme-colors: (
  primary: $red,
);

I get the following error:

Error: argument `$color` of `rgba($color, $alpha)` must be a color

       Backtrace:
        src/sass/bootstrap4/mixins/_forms.scss:33, in function `rgba`
        src/sass/bootstrap4/mixins/_forms.scss:33, in mixin `form-validation-state`
        src/sass/bootstrap4/_forms.scss:284
        on line 33 of src/sass/bootstrap4/mixins/_forms.scss
>>         box-shadow: 0 0 0 .2rem rgba($color,.25);

Does anyone know how to fix this?

Update | I temporarily fixed it by copying the entire 'color system' section from the Bootstrap variables.scss file into the _child_theme_variables.scss file.