Closed julkue closed 6 years ago
Show me your PostCSS config and CSS files
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
@ws456999 you need to put import plugin before postcss-simple-vars
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?
I'm using
postcss-easy-import
and after importing a file and trying to use a variable from over there it throws anundefined variable
error.