Never Publish Malarkey

    sass-all-variable-loader
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

    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

    Install

    npm i sass-all-variable-loader

    DownloadsWeekly Downloads

    158

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    46.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • milichev