Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

sass-all-variable-loader

Package Overview
Dependencies
3
Maintainers
1
Versions
6
Issues
File Explorer

Advanced tools

sass-all-variable-loader

Loads sass files and extracts all variable declarations including from the imported sass files.

    0.1.5latest

Version published
Maintainers
1
Yearly downloads
14,097
decreased by-20.01%

Weekly downloads

Readme

Source

sass-all-variable-loader

Loads sass files and extracts all variable declarations including from the imported sass files.

npm version dependencies devDependecies

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

Keywords

FAQs

What is sass-all-variable-loader?

Loads sass files and extracts all variable declarations including from the imported sass files.

Is sass-all-variable-loader popular?

The npm package sass-all-variable-loader receives a total of 465 weekly downloads. As such, sass-all-variable-loader popularity was classified as not popular.

Is sass-all-variable-loader well maintained?

We found that sass-all-variable-loader demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 14 Mar 2018
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc