Allow using variables when importing using postcss-easy-import

[Julian Kühnel]

I'm using postcss-easy-import and after importing a file and trying to use a variable from over there it throws an undefined variable error.

[Andrey Sitnik]

Show me your PostCSS config and CSS files

[39]

me too,
there is my code:

.postcssrc.js

module.exports = {
  plugins: [
    require('postcss-simple-vars')({}),
    require('postcss-mixins')({}),
    require('postcss-easy-import')({}),
    require('postcss-atrule-bem')({}),
    require('postcss-nested')(),
    require('postcss-mixins')(),
    require('autoprefixer')({
      browsers: [
        'last 3 versions',
        'ie >= 9',
        'ie_mob >= 10',
        'ff >= 30',
        'chrome >= 34',
        'safari >= 6',
        'opera >= 12.1',
        'ios >= 6',
        'android >= 4.4',
        'bb >= 10',
        'and_uc >= 9.9'
      ]
    })
  ]
}

vars.css

$tabs: 48px;
$bor: #000;

header.vue style

@import "../styles/vars"

@block header {
  height: $tabs;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @element left {
    display: flex;
  }
}

and i get this error

in ./src/components/header.vue

Syntax Error: Undefined variable $tabs
    at String.replace (<anonymous>)


 @ ./node_modules/.3.0.3@vue-style-loader!./node_modules/.0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./node_modules/.13.3.0@vue-loader/
lib/style-compiler?{"vue":true,"id":"data-v-75032cf2","scoped":false,"hasInlineConfig":false}!./node_modules/.13.3.0@vue-loader/lib/selector.js?typ
e=styles&index=0&bustCache!./src/components/header.vue 4:14-362 13:3-17:5 14:22-370
 @ ./src/components/header.vue
 @ ./node_modules/.3.0.5@ts-loader!./node_modules/.13.3.0@vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/pages/main.vue
 @ ./src/pages/main.vue
 @ ./src/pages lazy ^\.\/.*\.vue$
 @ ./src/router/routes.ts
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./build/dev-client ./src/main.ts

> Listening at http://localhost:8082

[Andrey Sitnik]

@ws456999 you need to put import plugin before postcss-simple-vars

[John Yani]

I think the problem here is #19:

PostCSS is not same as Sass :). There is not global namespace in PostCSS. So all variables works only local in current file. So if you didn’t define $max-content-width in Footer.scss it will not be used.

Unless something changed since 2015?