milichev / sass-all-variable-loader

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

sass-all-variable-loader

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

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

sass-all-variable-loader's Issues

TypeError: Cannot read property 'includePaths' of null

https://github.com/milichev/sass-all-variable-loader/blob/master/src/loader.ts#L16
loaderUtils.getOptions returns null if there isn't a query param.

Workaround

Add either a query param or an options object on the rule (see below).

  module: {
    rules: [
      {
        test: /variables\.scss$/,
        use: [{
          loader: 'sass-all-variable-loader',
          options: { bugFix: true },
        }],
      },
      ...

loader-utils is listed as a peer dependency, accepting any version

Please update the project to list 'loader-utils' as a dependency of version '^1.0.0', this project has a direct dependency on loader-utils and uses method 'getOptions' from this library that was not created until version 1.0.0.

This should still work if you just update it as a peer dependency, but this project explicitly requires 'loader-utils' and does not allow users to pass in a comparable library, so I truly believe it should not be a peer dependency.

See https://nodejs.org/en/blog/npm/peer-dependencies/

Webpack alias with tilde not working for imports

Assuming something like the below:

resolve: {
	alias: {
		scss: path.resolve(__dirname, '../src/assets/scss/'),
	},
},

The below works in various other sass loaders, but not this one:

@import "~scss/variables.scss";

This is because this addon is currently making an assumption that a ~ indicates a path to a node_module, rather than possibly being an alias.