Webpack, bulma and postcss-cssnext

Hello! I am facing some issues with working with cssnext and Bulma. I’m trying to make responsive typography using variables and calculations, but the variables in the :root directive I am declaring in global.scss are somehow conflicting with the ones in Bulma, which leads to ‘yarn run start’ not working properly.

This is the error I am facing (in fact I’m facing like 20 of these)

warning  in ./resources/assets/styles/main.scss

(Emitted value instead of an instance of Error) postcss-custom-properties: /home/nadal/Web/valet/lakegarden/web/app/themes/lakegarden/resources/assets/styles/node_modules/bulma/sass/grid/columns.sass:328:6: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable.is-7 { ... --columnGap: ... })

 @ ./resources/assets/styles/main.scss 4:14-358 18:2-22:4 19:20-364
 @ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

The fun thing here is that ‘yarn run build’ compiles correctly - this is only an issue with ‘yarn run start’.

Any ideas?

UPDATE: Apparently it DOES compile properly - it is just that Browsersync does not push the assets. A reload on my localhost:3000 tab works. So perhaps this is a browsersync issue?