Can't use a css variable from scss file in node_modules

Question

I want to use the css variable that is in an scss file from an installed module in node_modules.

node_modules folder:

     |node_modules
      - A
      -- A1
      --- variable.scss

varibale.scss:

$include-html-classes: false;
$include-html-global-classes: false;

@import "~foundation-sites/scss/foundation/components/_global.scss";
$default-color-white: #fff;
$color-white: var(--a-palette-complementary-0, $default-color-white);

webpack.config.js

{
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: isDevelopment
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: [
                                    require('autoprefixer')()
                                ],
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    includePaths: [
                                        path.resolve(__dirname, 'node_modules'),
                                        path.resolve(__dirname, 'node_modules/foundation-sites/scss')
                                    ]
                                },
                                sourceMap: true
                            }
                        }
                    ]
                },

                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: isDevelopment
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                },

I got a compile error:

SassError: argument `$color` of `transparentize($color, $amount)` must be a color

But compile successful if I try to use the variable $default-color-white instead of $color-white

my scss file:

@import "~A/A1/variable";
.import-section {
    border: 1px solid transparentize($color-white, 0.5); // compile error 
}

@import "~A/A1/variable";
    .import-section {
        border: 1px solid transparentize($default-color-white, 0.5); // compile OK 
    }

I don't know why I can't use the variable that uses the var function. Am I doing the wrong CSS loaders config?

user_5950509 · Answer

CSS variables are dynamic at run time and can't be transformed by SASS at compile time.

The SASS compiler is picking it up as:

border: 1px solid transparentize(var(--a-palette-complementary-0, #fff), 0.5);

SASS can't modify that variable as it's not a colour, it's just a variable that could be anything at all once the browser starts to render the page.

One downsides with using CSS variables is that you can't dynamically alter colour transparency at compile time or run time. However, it is possible to do this by creating variables with the RGB values and then creating other colour variables based on that:

:root {
  --foo-rgb: 255, 0, 0;
  --foo: rgb(var(--foo-rgb, #f00));
  --foo-50: rgba(var(--foo-rgb), 0.5);
}

.block {
  width: 100px;
  height: 100px;
}

.foo {
  background: var(--foo);
}

.foo-50 {
  background: var(--foo-50);
}

Can't use a css variable from scss file in node_modules

1 Answers