css variables are not properly processed in scss files

Question

I have a problem with css variables used in scss files.

When it's used as a pure value works fine, for example: iside file theme.css

:root {
    --app-bg-color: #f0f0f0;
}

and inside header.scss file:

...
    background: linear-gradient(0.25turn, var(--app-bg-color), rgba(var(--app-bg-color), 0.7));
...

var(--app-bg-color) works fine, but

rgba(var(--app-bg-color), 0.7) is not working properly

and I have got an error:

Error: /styles/header.scss:30:8: Unable to parse color from string "var(--app-bg-color)"

This is a part of babel.config.js:

{
    test: /\.scss$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[local]__[hash:base64:5]',
                },
                importLoaders: 1,
            },
        },
        {
            loader: 'postcss-loader',
            options: {
                syntax: 'postcss-scss',
                plugins: getSassPlugins({ isProd: false }),
            },
        },
    ],
},

I can't find, why it's not working; Do You have any ideas?

Could it be that you are passing HEX color code to the rgba css function? — Lazar Nikolic, Feb 10 '21 at 09:35
Not exactly, when define at top of a file a variable like $gradientColor: #f0f0f0, and later it's used as an argument of rgba($gradientColor, 0,7) everythings work fine — Robert Błoński, Feb 10 '21 at 09:44

score 0 · Answer 1 · answered Feb 10 '21 at 10:04

0

The error happens because rgba does not accept HEX values, you have to indicate an RGBA format, that you can do with SASS in the following way: rgba(#f0f0f0, 0.7);

answered Feb 10 '21 at 10:04

Jose Antonio

1
2

css variables are not properly processed in scss files

1 Answers1