4

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

sandrina-p
  • 3,794
  • 8
  • 32
  • 60

2 Answers2

0

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.

Chris
  • 54,599
  • 30
  • 149
  • 186
  • Nah, that doesn't help because i have `@import` from other paths than ./src. Thanks anyway – sandrina-p Feb 20 '17 at 10:13
  • Right, no worries. Yeah I use absolute across the board which probably makes things easier, but doesn't apply in your case – Chris Feb 20 '17 at 10:40
0

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"
Yilmaz
  • 35,338
  • 10
  • 157
  • 202