Argument `$color` of `darken($color, $amount)` must be a color #6

carl0zen · 2016-07-15T22:55:04Z

Hi, first of all thanks for the work on this loader, I think it's great, haven't been able to get it working because of a very common problem with css-modules.

Apparently it parses all color values to strings which get in the way while trying to perform sass color conversions.

This is the error I am getting while trying to execute the example in the README

composes: hero is-fullheight is-success is-bold from 'bulma';

ERROR in ./~/css-loader?modules&importLoaders=2!./~/sass-loader!./~/bulma-loader?theme=/Users/perezpriego/src/paint-composer/src/app/styles/bulma.scss!./~/bulma/bulma.sass
Module build failed:
          background-color: darken($color-invert, 5%)
                           ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
    node_modules/bulma/sass/elements/button.sass:68, in function `darken`
    node_modules/bulma/sass/elements/button.sass:68
      in /Users/perezpriego/src/paint-composer/node_modules/bulma/sass/elements/button.sass (line 68, column 29)
 @ ./~/css-loader?modules&importLoaders=2!./~/sass-loader!./~/bulma-loader?theme=/Users/perezpriego/src/paint-composer/src/app/styles/bulma.scss!./src/app/scenes/Home/style.scss 3:10-266 10:35-291 10:315-571 10:604-860 10:890-1146

Any idea how to solve this problem?

Thanks in advance

The text was updated successfully, but these errors were encountered:

carl0zen · 2016-07-16T00:14:52Z

To provide a bit more context, threw some warnings to try to debug and found that

//buttons.sass line 68
@warn $color-invert
@warn type-of($color-invert)

output:

WARNING: #111
Backtrace:
    node_modules/bulma/sass/elements/button.sass:68

WARNING: color
Backtrace:
    node_modules/bulma/sass/elements/button.sass:69

WARNING: #fff
Backtrace:
    node_modules/bulma/sass/elements/button.sass:68

WARNING: color
Backtrace:
    node_modules/bulma/sass/elements/button.sass:69

WARNING: #69707a
Backtrace:
    node_modules/bulma/sass/elements/button.sass:68

WARNING: color
Backtrace:
    node_modules/bulma/sass/elements/button.sass:69

WARNING: #f5f7fa
Backtrace:
    node_modules/bulma/sass/elements/button.sass:68

WARNING: color
Backtrace:
    node_modules/bulma/sass/elements/button.sass:69

WARNING: findColorInvert(#1fc8db)
Backtrace:
    node_modules/bulma/sass/elements/button.sass:68

WARNING: string
Backtrace:
    node_modules/bulma/sass/elements/button.sass:69

Looks like on the last pass the findColorInvert function is not evaluated

This is my webpack.config

var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')

var BUILD_DIR = path.resolve(__dirname, 'dist')
var APP_DIR = path.resolve(__dirname, 'src/app')
var GLOBAL_STYLES_DIR = path.resolve(__dirname, 'src/app/styles')

var config = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/only-dev-server',
    APP_DIR + '/index.jsx'
  ],
  output: {
    path: BUILD_DIR,
    publicPath: 'http://localhost:8080/',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss', '.html', '.css'],
    modulesDirectories: ['node_modules', 'src'],
  },
  resolveLoader: {
    modulesDirectories: [
      'node_modules'
    ]
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: APP_DIR,
        loader: 'react-hot!babel?presets[]=react&presets[]=es2015&presets[]=stage-2',
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css?modules&importLoaders=2", "sass", "bulma?theme="+ APP_DIR + '/styles/bulma.scss']
      },
      {
        test: /\.cssm$/,
        loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 'autoprefixer', 'sass']
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]']
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("bundle.css", {
      disable: false,
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devtool: "cheap-inline-source-map"
};

module.exports = config;

Thanks in advance

bazo81 · 2016-09-01T12:35:13Z

Tengo el mismo problema

Error: $color: "findColorInvert(#daf279)" is not a color for `darken'
on line 68 of /Users/gcorredor/reiki-escuela/sass/elements/button.sass
from line 12 of /Users/gcorredor/reiki-escuela/sass/style.sass
Use --trace for backtrace.

stipsan · 2016-09-01T14:03:59Z

I'll look into this and see if it's possible to work around it.

MattNguyen · 2016-12-14T21:27:45Z

@stipsan any progress on this? Running into this error as well.

echocompany · 2017-03-29T12:49:00Z

Also have this problem.

bastihilger · 2017-03-29T16:07:43Z

me too.

filljoyner · 2017-03-30T06:29:33Z

Hi all, I got this to finally build and maybe it will help someone else. The docs show importing Bulma like so

// Import Bulma's initial variables
@import "bulma/sass/utilities/variables.sass"

// override examples...

@import "bulma"

bulma.sass loads the variables automatically so I left them out altogether and linked directly to the bulma.sass file. This builds for me.

// over rides here

// import bulma
@import "node_modules/bulma/bulma.sass";

octoshrimpy · 2017-04-02T21:50:10Z

To help anyone who didn't quite understand (me for about 20mins):

Instead of importing variables at the beginning, and then the rest of bulma at the bottom, just include bulma.sass at the top. This will include all the variables so you can edit/override them.

Do not bother adding another import to the bottom, as it will throw errors.

SkoricIT · 2017-04-04T20:23:38Z

I just figured this out for myself. The problem is, that you need to

@import "bulma/sass/utilities/_all.sass";

instead of

@import "bulma/sass/utilities/variables.sass";

which instantly solves all problems.

This works:

// Import Bulma's initial variables
@import "bulma/sass/utilities/_all.sass";

// Override initial variables here
// You can add new ones or update existing ones:

$blue: #72d0eb; // Update blue
$pink: #ffb3b3; // Add pink
$family-serif: "Georgia", serif; // Add a serif family

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange; // Use the existing orange
$family-primary: $family-serif; // Use the new serif family

@import "bulma/bulma";

futurmat · 2017-04-07T06:13:03Z

I tried to overwrite bulma vars using the solution mentioned by @Ra1d3n and @octoshrimpy

App.vue

<style lang="sass">
  @import '~bulma/sass/utilities/_all.sass'
  $primary: #ff0000 !default
  @import '~bulma/bulma.sass'
</style>

While this does not throw any errors on compilation it also does not change the primary color to red. Any suggestions how to overwrite the variables?

SkoricIT · 2017-04-07T10:06:21Z

@futurmat Why would you set your override to default? Please remove !default and try again.

I realized that my proposed solution did work for overriding, but could not actually utilize pre-defined variables. I have no idea as to why that is. Right now, my solution is simply this:

$primary: #000;
@import "bulma/bulma";

futurmat · 2017-04-07T10:13:58Z

So, I think I resolved it. The latest version of Bulma uses !default for the variables. Apparently if so it is enough to do it like this:

<style lang="sass">
$primary: #EC8123
@import '~bulma/bulma.sass'
</style>

Using @import '~bulma/sass/utilities/_all.sass' before won't work!

octoshrimpy · 2017-04-07T19:29:51Z

Are the docs here on github? We should make a PR to edit them if so. It took a bit of searching to figure this out, it would be super easy to make the amend.

oliver-dvorski · 2017-04-23T20:44:11Z

So I'm trying to implement this into my own setup without your loader but I don't get my text colours recalculated

Meaning: if I use a super light primary colour, my text loses legibility

Screenshot

octoshrimpy · 2017-04-24T19:54:30Z

@Musmula what does your css/sass look like? can you use/set $primary?

If you set $primary, just use $primary-invert and it should work. Otherwise, use findColorInvert($color).

http://bulma.io/documentation/overview/functions/

oliver-dvorski · 2017-04-25T10:15:44Z

Yep, you're right. I ended up importing the functions file and setting the primary invert

Thx

emilmr · 2017-06-02T15:46:14Z

For Rails, this worked:

// application.scss
$green: #007f40;
$primary: $green;
@import "bulma.sass";

up9cloud · 2017-07-25T09:59:05Z

for v0.4.3 + findColorInvert()

<style lang="sass">
@import "../node_modules/bulma/sass/utilities/initial-variables"
@import "../node_modules/bulma/sass/utilities/functions"

$primary: #6d8acc
$primary-invert: findColorInvert(#6d8acc)

@import "../node_modules/bulma/bulma"
</style>

stipsan · 2018-03-30T15:38:39Z

https://github.com/stipsan/bulma-loader#this-project-is-no-longer-maintained

stipsan added the bug label Sep 1, 2016

stipsan self-assigned this Sep 1, 2016

ptcampbell mentioned this issue Nov 16, 2017

Compile error: $color of darken($color, $amount)` must be a color jgthms/bulma#1337

Closed

stipsan closed this as completed Mar 30, 2018

mblarsen mentioned this issue Jul 20, 2018

Bulma 0.7.* support vue-bulma/notification#11

Open

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Argument `$color` of `darken($color, $amount)` must be a color #6

Argument `$color` of `darken($color, $amount)` must be a color #6

carl0zen commented Jul 15, 2016

carl0zen commented Jul 16, 2016 •

edited

Loading

bazo81 commented Sep 1, 2016

stipsan commented Sep 1, 2016

MattNguyen commented Dec 14, 2016

echocompany commented Mar 29, 2017

bastihilger commented Mar 29, 2017

filljoyner commented Mar 30, 2017

octoshrimpy commented Apr 2, 2017 •

edited

Loading

SkoricIT commented Apr 4, 2017 •

edited

Loading

futurmat commented Apr 7, 2017 •

edited

Loading

SkoricIT commented Apr 7, 2017

futurmat commented Apr 7, 2017

octoshrimpy commented Apr 7, 2017

oliver-dvorski commented Apr 23, 2017

octoshrimpy commented Apr 24, 2017

oliver-dvorski commented Apr 25, 2017

emilmr commented Jun 2, 2017 •

edited

Loading

up9cloud commented Jul 25, 2017

stipsan commented Mar 30, 2018

Argument $color of darken($color, $amount) must be a color #6

Argument $color of darken($color, $amount) must be a color #6

Comments

carl0zen commented Jul 15, 2016

carl0zen commented Jul 16, 2016 • edited Loading

bazo81 commented Sep 1, 2016

stipsan commented Sep 1, 2016

MattNguyen commented Dec 14, 2016

echocompany commented Mar 29, 2017

bastihilger commented Mar 29, 2017

filljoyner commented Mar 30, 2017

octoshrimpy commented Apr 2, 2017 • edited Loading

SkoricIT commented Apr 4, 2017 • edited Loading

futurmat commented Apr 7, 2017 • edited Loading

SkoricIT commented Apr 7, 2017

futurmat commented Apr 7, 2017

octoshrimpy commented Apr 7, 2017

oliver-dvorski commented Apr 23, 2017

octoshrimpy commented Apr 24, 2017

oliver-dvorski commented Apr 25, 2017

emilmr commented Jun 2, 2017 • edited Loading

up9cloud commented Jul 25, 2017

stipsan commented Mar 30, 2018

Argument `$color` of `darken($color, $amount)` must be a color #6

Argument `$color` of `darken($color, $amount)` must be a color #6

carl0zen commented Jul 16, 2016 •

edited

Loading

octoshrimpy commented Apr 2, 2017 •

edited

Loading

SkoricIT commented Apr 4, 2017 •

edited

Loading

futurmat commented Apr 7, 2017 •

edited

Loading

emilmr commented Jun 2, 2017 •

edited

Loading