Error using the config files

[Adam]

Hi,

Trying to get going with this. Really happy there's a loader for this, been using the bootstrap one, and was chuffed to find someone's ported thej technique to materialize.

Set up the config files, but when I build I get the following error:

ERROR in ./~/css-loader!./~/sass-loader!./~/materialize-loader/materialize-styles.loader.js!./materialize.config.js
Module build failed:
$primary-color-light: lighten($primary-color, 15%);
                     ^
      Argument `$color` of `lighten($color, $amount)` must be a color

Backtrace:
        materialize.config.scss:2, in function `lighten`
        materialize.config.scss:2
      in C:\TFSDefault\LoveThyNeighbour\LuvThyNeighbor\materialize.config.scss (line 2, column 23)
Error:
$primary-color-light: lighten($primary-color, 15%);
                     ^
      Argument `$color` of `lighten($color, $amount)` must be a color

Backtrace:
        materialize.config.scss:2, in function `lighten`
        materialize.config.scss:2
      in C:\TFSDefault\LoveThyNeighbour\LuvThyNeighbor\materialize.config.scss (line 2, column 23)
    at options.error (C:\TFSDefault\LoveThyNeighbour\LuvThyNeighbor\node_modules\node-sass\lib\index.js:271:32)
 @ ./~/style-loader!./~/css-loader!./~/sass-loader!./~/materialize-loader/materialize-styles.loader.js!./materialize.config.js 4:14-184

For context, my materialize.config.js looks like...

module.exports = {
    styleLoader: 'style-loader!css-loader!sass-loader',

    styles: {
        "materialize": true,
    }
};

and my materialize.config.scss looks like...

$primary-color: color("materialize-red", "lighten-2");
$primary-color-light: lighten($primary-color, 15%);
$primary-color-dark: darken($primary-color, 15%);

They are next to each other, and appear to be being used, just doesn't seem to know about the materialize variables.

Thanks.

[Adam]

So the error comes from the color function not being defined before the config file is loaded.

For the moment I have changed the materialize-styles.loader.js like this...

var start =
            "$roboto-font-path: \"~materialize-css/fonts/roboto/\";\n"
            + "@import \"~materialize-css/sass/components/_color.scss\";\n";
            + "@import \"./materialize.config.scss\";\n";

Seems to be working.

[Gaël Reyrol]

Hi,

Thanks again for trying this loader and reporting things like this !
It seems to be best way to fix it, what do you think ?

Can you submit a pull request for this ?

Regards