Open winston0410 opened 2 years ago
may be related:
Copy/Paste the example
$dir: top;
$blue: #056ef0;
$column: 200px;
.menu_link {
background: $blue;
width: $column;
}
.menu {
width: calc(4 * $column);
margin-$(dir): 10px;
}
I get this error:
ERROR in ./components/Footer/styles.css (../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./components/Footer/styles.css)
Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(17:3) postcss-simple-vars: ./components/Footer/styles.css Undefined variable $dir
15 | width: $column;
16 | width: calc(4 * $column);
> 17 | margin-$(dir): 10px;
| ^
18 | }
19 |
Here is my postcssrc.json
module.exports = {
"plugins": [
"postcss-import",
"postcss-map-get",
"postcss-mixins",
"postcss-hexrgba",
"postcss-simple-vars",
"precss",
"postcss-preset-env",
"autoprefixer"
]
};
Here is my output (without any error):
.menu_link {
background: #056ef0;
width: 200px;
}
.menu {
width: calc(4 * 200px);
margin-top: 10px;
}
went through the plugins adding/removing
when precss
is enabled as a plugin along with postcss-simple-vars
the error pops up
Seems like precss
uses postcss-advanced-variables
these plugins might be colliding 🤔
@bahtou yeap. I recommend replacing precss
since it is not maintained well with separated plugins
I tried to set simple vars as CSS variable, but it doesn't work:
It will gives an error like this:
Is this by design?