PostCSS css-next - global variables without having to use @import

Question

I have a file variables.css with CSS variables inside a :root{}

Right now each time I need to use it in another .css file I use:

@import './path/to/variables.css'.

I want to know if there is a way to have variables.css available globally without having to import it every single time I need it.

I tried to use the option customProperties on cssnext plugin, but it gives an error compiling css to a js object...
I'm using React with webpack 1 and as postcss plugins I have import, mixins, cssnext and nested.

Thanks

Answer 1

As far as I understand, no, but you can make your life easier. In your config for import, set the path, such as:

cssImport({ path: './src' })

And assuming your variables.css is in src/variables.css, you can simply do:

@import 'variables';

instead of dot walking back up the tree to find the right spot.

Answer 2

You import the variable.css to main.css(your global css file)

//main.css
@import "./variable.css";

Then in _app.js import the main.css:

// Your path to main.css
import "../assets/main.css"