epegzz / Sass Vars Loader
Licence: mit
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sass Vars Loader
Sass Loader
Compiles Sass to CSS
Stars: ✭ 3,718 (+3219.64%)
Mutual labels: webpack, webpack-loader, loader, scss, sass
Node Hot Loader
Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.
Stars: ✭ 111 (-0.89%)
Mutual labels: webpack, hmr, hot-reload, loader
Style Resources Loader
CSS processor resources loader for webpack
Stars: ✭ 214 (+91.07%)
Mutual labels: webpack, loader, scss, sass
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (+337.5%)
Mutual labels: webpack, hmr, hot-reload, loader
Uicookbook
A few recipes and build workflows for UI dev
Stars: ✭ 19 (-83.04%)
Mutual labels: webpack, scss, sass
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+550.89%)
Mutual labels: webpack, scss, sass
Stylefmt Loader
Webpack-loader. Fixes stylelint issues automatically while bundling with Webpack.
Stars: ✭ 24 (-78.57%)
Mutual labels: webpack, webpack-loader, loader
Thread Loader
Runs the following loaders in a worker pool
Stars: ✭ 945 (+743.75%)
Mutual labels: webpack, webpack-loader, loader
Svgr
Transform SVGs into React components 🦁
Stars: ✭ 8,263 (+7277.68%)
Mutual labels: webpack, webpack-loader, loader
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+1126.79%)
Mutual labels: webpack, scss, sass
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+497.32%)
Mutual labels: webpack, hmr, scss
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+464.29%)
Mutual labels: webpack, hmr, sass
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-6.25%)
Mutual labels: webpack, webpack-loader, loader
Wasm Loader
✨ WASM webpack loader
Stars: ✭ 604 (+439.29%)
Mutual labels: webpack, webpack-loader, loader
Angular Electron
Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload) 🚤
Stars: ✭ 4,914 (+4287.5%)
Mutual labels: webpack, hot-reload, sass
React Pwa Webpack Starter
Boilerplate to build a React PWA with Webpack + Workbox
Stars: ✭ 38 (-66.07%)
Mutual labels: webpack, hot-reload, sass
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+807.14%)
Mutual labels: webpack, scss, sass
Fuse Box
A blazing fast js bundler/loader with a comprehensive API 🔥
Stars: ✭ 4,055 (+3520.54%)
Mutual labels: hmr, hot-reload, loader
React Dashboard
🔥React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) 🔥
Stars: ✭ 1,268 (+1032.14%)
Mutual labels: webpack, hmr, sass
Sass Vars Loader
Import Sass vars from Webpack config or from JS/JSON files
✅ JSON Files ✅ JavaScript Files ✅ Inlined in Webpack Config This loader allows you to use Sass variables defined in:
✅ SASS Syntax ✅ SCSS Syntax Supports both syntax types:
✅ HMR Enabled Supports hot reload:
Install
using npm
npm install @epegzz/sass-vars-loader --save-dev
using yarn
yarn add @epegzz/sass-vars-loader --dev
Usage
Look at the Example Webpack Config File to see how to use this loader in conjunction with style-loader and css-loader
Option 1: Inline Sass vars in the webpack config
// styles.css:
.some-class {
background: $greenFromWebpackConfig;
}
// webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
module: {
rules: [{
test: /\.scss$/,
use: [
// Inserts all imported styles into the html document
{ loader: "style-loader" },
// Translates CSS into CommonJS
{ loader: "css-loader" },
// Compiles Sass to CSS
{ loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
// Reads Sass vars from files or inlined in the options property
{ loader: "@epegzz/sass-vars-loader", options: {
syntax: 'scss',
// Option 1) Specify vars here
vars: {
greenFromWebpackConfig: '#0f0'
}
}
}]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Option 2: Load Sass vars from JSON file
// config/sassVars.json
{
"purpleFromJSON": "purple"
}
// styles.css:
.some-class {
background: $purpleFromJSON;
}
// webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
module: {
rules: [{
test: /\.scss$/,
use: [
// Inserts all imported styles into the html document
{ loader: "style-loader" },
// Translates CSS into CommonJS
{ loader: "css-loader" },
// Compiles Sass to CSS
{ loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
// Reads Sass vars from files or inlined in the options property
{ loader: "@epegzz/sass-vars-loader", options: {
syntax: 'scss',
files: [
// Option 2) Load vars from JSON file
path.resolve(__dirname, 'config/sassVars.json')
]
}
}]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Option 3: Load Sass vars from JavaScript file
// config/sassVars.js
module.exports = {
blueFromJavaScript: 'blue'
};
// styles.css:
.some-class {
background: $blueFromJavaScript;
}
// webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
module: {
rules: [{
test: /\.scss$/,
use: [
// Inserts all imported styles into the html document
{ loader: "style-loader" },
// Translates CSS into CommonJS
{ loader: "css-loader" },
// Compiles Sass to CSS
{ loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },
// Reads Sass vars from files or inlined in the options property
{ loader: "@epegzz/sass-vars-loader", options: {
syntax: 'scss',
files: [
// Option 3) Load vars from JavaScript file
path.resolve(__dirname, 'config/sassVars.js')
]
}
}]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Pro Tip: Using objects as Sass vars!
Use map_get in order to use objects as Sass vars:
// config/sassVars.js
module.exports = {
lightTheme: {
background: 'white',
color: 'black'
},
darkTheme: {
background: 'black',
color: 'gray'
}
};
// styles.css:
$theme: $lightTheme;
.some-class {
background: map_get($theme, background);
color: map_get($theme, color);
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].