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

[carl0zen]

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

[carl0zen]

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]

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]

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

[MattNguyen]

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

[echocompany]

Also have this problem.

[bastihilger]

me too.

[filljoyner]

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]

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]

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]

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]

@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]

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]

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]

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]

@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]

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

Thx

[emilmr]

For Rails, this worked:

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

[up9cloud]

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]

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