Custom property ignored: not scoped to the top-level :root element

[Roman Privalov]

I'm really enjoying the idea of css custom properties. But old browsers do not support this feature. So I try to use your plugin and stuck at issue, that I can't solve.

Here is the begining of my css file:

@import "normalize.css"
@import "http://fonts.fontstorage.com/import/intro.css"
@import "http://fonts.fontstorage.com/import/notoserif.css"

:root {
    --column: calc(100vw / 24);
    --row: calc(100vh / 12);
    --blue: #0095DA;
    --green: #58BF92;
    --grey: #394449;
    --yellow: #FBC950;
    font-family: "Noto Serif";
    font-size: 16px;
    line-height: 1.4;
}

and so on...
and here is my webpack config:

const path = require('path');

module.exports = {
    entry: './src/App.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'public/js')
    },

    devtool: 'source-map',
    watch: true,
    watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        },

    module: {
        rules: [
            {
                test: /\.vue$/,
                // loader: 'vue-loader'
                use: {
                    loader: 'vue-loader',
                    options: {
                        postcss: [require('postcss-cssnext')()]
                     }
                }
            },

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },

            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            context: 'public',
                            name: '../img/[name].[ext]',
                            publicPath: 'img/',
                        }
                    }
                ]
            },

            {
               test: /\.css$/,
               use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader'
                        }
                    ],
            }

        ]
    },
}

And the error I got: Custom property ignored: not scoped to the top-level :root element (:root { ... --column: ... })

What I'm doing wrong?

[Max Thirouin]

You forget ; for imports.

PS: use triple ` for blocks of code (I edited your issue)

[johan-vd-merwe]

What was the reason for closing this? Did the semi-colons fix the issue?
I'm getting the same error now in a angular-cli project when declaring css variables.

[Max Thirouin]

In this example above the ";" are missing for sure. That's why I closed this assuming that's the main reason of the error.