sass-vars-loader - Import Sass vars from Webpack config or from JS/JSON files

  •        25

A SASS vars loader for Webpack. Load global SASS vars from JS/JSON files or from Webpack config.

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

Dependencies:

loader-utils : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

sass-resources-loader - SASS resources (e.g. variables, mixins etc.) loader for Webpack

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Note, this loader is not limited to SASS resources. It supposedly works with less, post-css, etc. per issue 31.

sass-json-vars - Import variables as JSON into Sass

  •    Ruby

@import json data into Sass $variables.Important: the latest version of sass-rails is locked in to Sass 3.2. This means that Sass maps are not available to sass-json-vars to parse nested objects.

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.


resolve-url-loader - Webpack loader that resolves relative paths in url() statements based on the original source file

  •    Javascript

A webpack loader that rewrites relative paths in url() statements based on the original source file. With webpack you can import a .scss file (or some other compile-to-css file) and have a loader take care of the transpilation. With Sass (at least) this file can include a whole tree of source files into a single output.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

postcss-simple-vars - PostCSS plugin for Sass-like variables

  •    Javascript

PostCSS plugin for Sass-like variables.You can use variables inside values, selectors and at-rule’s parameters.

react-transform-boilerplate - A new Webpack boilerplate with hot reloading React components, and error handling on module and component level

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .

react-hot-loader - Tweak React components in real time.

  •    Javascript

Watch Dan Abramov's talk on Hot Reloading with Time Travel. Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.

fuse-box - A blazing fast js bundler/loader with a comprehensive API :fire:

  •    TypeScript

FuseBox is a bundler/module loader that combines the power of webpack, JSPM and SystemJS.It is blazing fast (it takes 50-100ms to re-bundle) which makes it extremely convenient for developers. It requires zero configuration to bundle such monsters like babel-core.

react-hot-boilerplate - Minimal live-editing example for React

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. The minimal dev environment to enable live-editing React components.

ts-loader - TypeScript loader for webpack

  •    Javascript

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

  •    Javascript

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

vue-webpack-typescript - A Vue, Webpack, Typescript, Bootstrap setup with hot reload, dynamic imports, unit testing, code coverage, sass, uncss and bundling/minification

  •    TypeScript

A Vue 2.5, Webpack 3.10, Typescript 2.7, Bootstrap 4.0 setup with hot reload, dynamic imports, unit testing, code coverage, sass and bundling/minification. See the changelog for updates.

angular-hmr - :fire: Angular Hot Module Replacement for Hot Module Reloading via @TipeIO

  •    TypeScript

Please see repository AngularClass/angular-seed for a working example.bootloader is only needed to detect that the dom is ready before bootstraping otherwise bootstrap. This is needed because that dom is already ready during reloading.

angular-electron - Ultra-fast bootstrapping with Angular 6 and Electron (Typescript + SASS + Hot Reload) :speedboat:

  •    TypeScript

Bootstrap and package your project with Angular 6(+) and Electron (Typescript + SASS + Hot Reload) for creating Desktop applications. There is an issue with yarn and node_modules that are only used in electron on the backend when the application is built by the packager. Please use npm as dependencies manager.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.