How to access window object in .less files,vendor folder and ember-cli-build.js
ember-cli-build.js runs in NodeJS, not in the browser, so there is no window object for it to access.
Javascript in the vendor folder that you add to your app via the app.import() method in ember-cli-build.js will run in the browser and can use window normally.
.less files aren’t Javascript and it doesn’t really make sense to talk about how they could access window.
1 Like
What I need is to access the variable sent from server side in ember-cli-build.I am storing that variable in window object.I need to access that variable in ember-cli-build.js.Is there any workaround for that?
This doesn’t really make sense in the context of an Ember application. An ember project is a collection of a large number of files: node.js “project” files, app source files (.js, .hbs, etc), assets, tests, etc. What you end up with when the browser executes that code however is completely different. When you run ember build it runs the node code (ember-cli-build.js for one) and uses the build system that is part of ember-cli to smash all the app source into a few files which it stores somewhere (/dist by default).
So if you build your project and then look in /dist that’s essentially all the browser has access to. Put differently, ember-cli-build.js cannot “see” anything that comes from the server because ember-cli-build.js is used to build the app and is not involved at all at runtime. Same goes with your .less files, by the time the app is running in the browser they aren’t less files anymore, they’ve been compiled down to good ol’ fashioned CSS in <app>.css.
That said there is probably another way to do what you’re attempting at runtime so if you could provide a little more detail about what you’re trying to do we may be able to come up with some suggestions.
1 Like
Thank you a lot.I gives me better understanding.What I am trying to do is to use a variable global to all .less files.If the value is known I can declare it in less configuration using less options.The value for variable comes from service side.I am storing that variable in window object.Is there any workaround for this?
AFAIK Less variables aren’t meant to be “variable” at runtime. You could generate classes for each “value” of that variable and apply them conditionally in your ember code based on the server response. All CSS styles need to be known at runtime though, either that or you’d have to use JS to modify your styles which isn’t necessarily recommended.
1 Like
You should look into CSS Custom Properties. If you have to support IE11 they’re not an option, but if you don’t they will do exactly what it sounds like you’re looking for.
1 Like
Thank you @dknutsen @chriskrycho. @dknutsen can you please provide me some sample code.