https://github.com/milichev/sass-all-variable-loader
Loads sass files and extracts all variable declarations including from the imported sass files
https://github.com/milichev/sass-all-variable-loader
json loader sass scss variables webpack
Last synced: 2 months ago
JSON representation
Loads sass files and extracts all variable declarations including from the imported sass files
- Host: GitHub
- URL: https://github.com/milichev/sass-all-variable-loader
- Owner: milichev
- License: mit
- Created: 2018-03-12T20:34:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-21T21:20:56.000Z (about 8 years ago)
- Last Synced: 2025-06-13T00:45:30.216Z (about 1 year ago)
- Topics: json, loader, sass, scss, variables, webpack
- Language: TypeScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sass-all-variable-loader
> Loads sass files and extracts all variable declarations including
from the imported sass files.
[](https://badge.fury.io/js/sass-all-variable-loader) [](https://david-dm.org/milichev/sass-all-variable-loader) [](https://david-dm.org/milichev/sass-all-variable-loader#info=devDependencies)
## About
This webpack loader helps to get variable values from the SASS file
in the JavaScript file as a JSON object with the property names
corresponding to variable names.
## Installation
### npm
```
$ npm install --save-dev sass-all-variable-loader
```
### yarn
```
$ yarn add sass-all-variable-loader -D
```
## Usage
It's better to create a SASS file which imports all variable declaration
files you need. For example, `variables.scss`:
```
@import "./common-variables";
@import "./bootstrap-variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
```
Suppose _bootstrap-variables.scss_ declares variables as follows:
```
$gray-800: #29363d;
$body-color: $gray-800;
```
Then declare a loader in your **webpack config**:
```
module.exports = {
module: {
rules: [
{
oneOf: [
{
test: /variables\.scss/,
use: [
'sass-all-variable-loader',
]
},
```
**Important thing: this entry should be _before_ any other .scss loaders.**
Then you can import variables in your .js/.ts file:
```
import * as reactstrap from 'reactstrap';
import styled from 'styled-components';
const variables = require('../../scss/variables.scss');
export const Pimpochka = styled(reactstrap.Button)`
background-color: ${variables['$body-color']};
`;
```
If you don't want to declare a separate entry in webpack config, you
can import the sass file with the exclamation mark syntax:
```
import variables from '!!sass-all-variable-loader!./_variables.scss';
```
However I don't recommend it because it is weird and it breaks
navigation in your favorite IDE.
## Limitations
This loader was created because of critical limitations of similar ones
out there. For example
[sass-variable-loader](https://github.com/nordnet/sass-variable-loader)
can't handle any multiline statements or declarations such as sass maps
or functions. Even though this loader still has it's own limitations:
* The current implementation neglects the content from the previous
loaders, if any.
* The resulting map preserves the variable names (see usage example
above). If you need them _camelCased_, you are welcome to contribute.
## License
[MIT](LICENSE)