It does not work well when import file with vars
m-pokrovskii opened this issue · comments
Errors prevented startup:
While minifying app stylesheet:
app/client/views/homeLayout/styles/components/arrow-sepparated.css:5:3: postcss-simple-vars: arrow-sepparated.css:5:3: Undefined variable $mobile
Css Syntax Error.
So, i have a file arrow-sepparated.css with a variable $mobile
The variable $mobile have been declared in the vars.css.
Hi, ok, and which PostCSS plugin do you use to handle variables? postcss-simple-vars ? I understand that you also use imports? You need to import vars.css to arrow-separated.css by for example postcss-import
Could you create a reproduction repo similar to this one: https://github.com/juliancwirko/meteor-postcss-test ? (in this repo there are used variables and imports, but I don't remember if I test importing vars).
main.css: @import vars; @import styles
vars.css: $mobile: 980px
styles.css: width: $mobile
Maybe the problem is with a path. I think it should be relative to main.css. I will check.
Yeah, this is a third party plugin. I don't know how broadly it will respect Meteor build laws ;) I'll try to test it too. Bassicaly for now I usually use Stylus and PostCSS in one project, so I can use all cool stuff from Stylus like vars and imports and for other ('light') stuff I can still use PostCSS. But of course it will be cool if we can use only PostCSS.
Definitely off-topic, but what an advantages you get using stylus with PostCss. Doesn't postcss capable to do anything that stylus do?
Yest it can do the same. But I am not sure if all the imports etc. will work as good as with preprocessors in Meteor environment.
I've done a quick test and it seems to work for me.
Here is a test.import.css file which imports vars.import.css file and it works as it should. You can clone all test repo and run for your tests.
Yes, this works. Thanks.
Ok, thanks, closing.