sass-vars-loader | Use Sass variables defined in Webpack config | Style Language library

 by   epegzz JavaScript Version: v4.0.0 License: MIT

kandi X-RAY | sass-vars-loader Summary

kandi X-RAY | sass-vars-loader Summary

sass-vars-loader is a JavaScript library typically used in User Interface, Style Language, Webpack applications. sass-vars-loader has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i @webini/sass-vars-loader' or download it from GitHub, npm.

Use Sass variables defined in Webpack config or in external Javascript or JSON files
Support
    Quality
      Security
        License
          Reuse

            kandi-support Support

              sass-vars-loader has a low active ecosystem.
              It has 116 star(s) with 23 fork(s). There are 3 watchers for this library.
              OutlinedDot
              It had no major release in the last 12 months.
              There are 6 open issues and 27 have been closed. On average issues are closed in 37 days. There are 12 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of sass-vars-loader is v4.0.0

            kandi-Quality Quality

              sass-vars-loader has 0 bugs and 0 code smells.

            kandi-Security Security

              sass-vars-loader has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              sass-vars-loader code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              sass-vars-loader is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              sass-vars-loader releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              sass-vars-loader saves you 15 person hours of effort in developing the same functionality from scratch.
              It has 43 lines of code, 0 functions and 20 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of sass-vars-loader
            Get all kandi verified functions for this library.

            sass-vars-loader Key Features

            No Key Features are available at this moment for sass-vars-loader.

            sass-vars-loader Examples and Code Snippets

            No Code Snippets are available at this moment for sass-vars-loader.

            Community Discussions

            Trending Discussions on sass-vars-loader

            QUESTION

            How to recompile angular4 app in production?
            Asked 2017-Dec-13 at 14:08

            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:08

            I 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.

            Source https://stackoverflow.com/questions/47753370

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install sass-vars-loader

            You can install using 'npm i @webini/sass-vars-loader' or download it from GitHub, npm.

            Support

            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
            CLONE
          • HTTPS

            https://github.com/epegzz/sass-vars-loader.git

          • CLI

            gh repo clone epegzz/sass-vars-loader

          • sshUrl

            git@github.com:epegzz/sass-vars-loader.git

          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular Style Language Libraries

            Try Top Libraries by epegzz

            winston-dev-console

            by epegzzTypeScript

            node-scraper

            by epegzzJavaScript

            pyramid_haml

            by epegzzPython

            StorageAlchemy

            by epegzzPython