Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epegzz/sass-vars-loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
https://github.com/epegzz/sass-vars-loader
hmr hot-reload javascript json loader sass sass-vars scss variables webpack webpack-loader
Last synced: 11 days ago
JSON representation
Use Sass variables defined in Webpack config or in external Javascript or JSON files
- Host: GitHub
- URL: https://github.com/epegzz/sass-vars-loader
- Owner: epegzz
- License: mit
- Created: 2016-08-21T17:10:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T01:09:30.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T00:34:05.380Z (14 days ago)
- Topics: hmr, hot-reload, javascript, json, loader, sass, sass-vars, scss, variables, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 4.15 MB
- Stars: 119
- Watchers: 4
- Forks: 23
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Sass Vars Loader
Import Sass vars from Webpack config or from JS/JSON files
##### This loader allows you to use Sass variables defined in:
##### Supports both syntax types:
##### Supports hot reload:
## Install
using npm
```sh
npm install @epegzz/sass-vars-loader --save-dev
```
using yarn
```sh
yarn add @epegzz/sass-vars-loader --dev
```
## Usage
Look at the [Example Webpack Config File](./example/webpack.config.js) to see how to use this
loader in conjunction with [style-loader](https://github.com/webpack-contrib/style-loader) and
[css-loader](https://github.com/webpack-contrib/css-loader)
### Option 1: Inline Sass vars in the webpack config
```scss
// styles.css:
.some-class {
background: $greenFromWebpackConfig;
}
```
```js
// 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
```js
// config/sassVars.json
{
"purpleFromJSON": "purple"
}
```
```scss
// styles.css:
.some-class {
background: $purpleFromJSON;
}
```
```js
// 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
```js
// config/sassVars.js
module.exports = {
blueFromJavaScript: 'blue'
};
```
```scss
// styles.css:
.some-class {
background: $blueFromJavaScript;
}
```
```js
// 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](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method)
in order to use objects as Sass vars:
```js
// config/sassVars.js
module.exports = {
lightTheme: {
background: 'white',
color: 'black'
},
darkTheme: {
background: 'black',
color: 'gray'
}
};
```
```scss
// styles.css:
$theme: $lightTheme;
.some-class {
background: map_get($theme, background);
color: map_get($theme, color);
}
```