Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #25361
Closed
Open
Issue created Jan 18, 2018 by Administrator@rootContributor

Darken function "must be a color" error V4

Created by: andrade1379

Hello, I want to preface this by saying there is a ticket open on this error but only collaborators are allowed to comment on it. I just need to know if this is something that is currently in the works? or if someone can tell me if there is a work around for this or if it's something that I'm doing wrong.

Currently I am importing my custom variables over the bootstrap.scss file like so:

// Variables
@import 'config/variables';

// Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap';

This is my setup:

"bootstrap": "^4.0.0",
"laravel-mix": "^1.0"

Laravel Mix uses Webpack for those who don't know and from the looks of it uses the latest. What I am seeing happening when trying to run yarn run dev I get a series of errors.

ERROR in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/Users/me/project-com/SourceCode/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./assets/scss/app.scss
Module build failed:
$link-hover-color : darken($link-color, 15%);
                   ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
	assets/scss/config/_variables.scss:86, in function `darken`
	assets/scss/config/_variables.scss:86
      in /Users/me/project-com/SourceCode/assets/scss/config/_variables.scss (line 86, column 21)
 @ ./assets/scss/app.scss 4:14-254
 @ multi ./assets/js/app.js ./assets/scss/app.scss

ERROR in ./assets/scss/app.scss
Module build failed: ModuleBuildError: Module build failed:
$link-hover-color : darken($link-color, 15%);
                   ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
	assets/scss/config/_variables.scss:86, in function `darken`
	assets/scss/config/_variables.scss:86
      in /Users/me/project-com/SourceCode/assets/scss/config/_variables.scss (line 86, column 21)
    at runLoaders (/Users/me/project-com/SourceCode/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Users/me/project-com/SourceCode/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Users/me/project-com/SourceCode/node_modules/async/dist/async.js:2257:31)
    at Object.callback (/Users/me/project-com/SourceCode/node_modules/async/dist/async.js:958:16)
    at options.error (/Users/me/project-com/SourceCode/node_modules/node-sass/lib/index.js:294:32)
 @ ./assets/scss/app.scss
 @ multi ./assets/js/app.js ./assets/scss/app.scss
Assignee
Assign to
Time tracking