sass-vars-loader | Use Sass variables defined in Webpack config | Style Language library
kandi X-RAY | sass-vars-loader Summary
kandi X-RAY | sass-vars-loader Summary
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of sass-vars-loader
sass-vars-loader Key Features
sass-vars-loader Examples and Code Snippets
Community Discussions
Trending Discussions on sass-vars-loader
QUESTION
I'm trying to find best way to support theme styling in my angular 4 app. I'm using SASS variables and theme setup relies on 4 SASS vars: primary and secondary colour, background-image and switch for dark/light theme.
Now, I want to change theme dynamically from the app. I have this for now:
I'm using sass-vars-loader library (https://github.com/epegzz/sass-vars-loader), and load sass variables from JSON file into my _vars.scss during app build. And when I change those vars from the component I write new values to JSON file and trigger app recompile as I'm watching for changes on that file.
This is succesfuly recompiling and loading new variables into _vars.scss during the development, but my question is how can I support that in the production.
To be able to configure webpack, I ejected webpack.config.js with $ng eject
thus not using angular-cli commands anymore.
ANSWER
Answered 2017-Dec-13 at 14:08I suggest you re-think your strategy of using build tools, but I'm not convinced you need to build a server to achieve the result you want.
Maybe you can compile all of the themes, and 'swap' them out at run-time. Replacing css file on the fly (and apply the new style to the page)
If the themes are not fixed, i.e. you can have any combination, the maybe you can embed the 'theme' css in the main html page and swap out those values as required. Change CSS rule at runtime
--- edit ---
I fully understand that it's intimidating to have to do a major design change at this point in your applications lifecycle but I am very certain that your current approach is going to cause you signifigantly more headache.
Angular, SCSS, node etc were not intended for and do not lend themselves to the scenario which you are describing.
Are you aware that in the scenario you're describing; if any user triggers a 'theme change', the website will be 'taken offline' while it's recompiling and that the resulting css theme applied would be visible to everyone using the site, not just the user who triggered it?
Also, the browser isn't using your scss files, it's using the compiled output from all your SCSS files which I believe in ng4's case, is a JS file with the CSS embedded.
In order to do what you're proposing wihtout recompiling angular, (which will require a lot of additional back-end server work and potentially lead to more complexity/reliability issues) you will need to get and populate your vars.SCSS file, combine it with all the other SCSS files, somehow replicate how angular CLI generates the CSS embedded JS file and then load that into your browser, replacing the initial one... and you would need to do all of that from javascript/typescript running in the browser.
Redesign your app a little, create a css 'overlay' file, and at runtime, swap out the values and load it into the DOM to change themes. I'm sure others will weigh in here too, but I believe that's a much better direction to proceed to get the results you want, as quickly as possible.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install sass-vars-loader
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page