Package Exports

sass-resources-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sass-resources-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sass-resources-loader

This loader will @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file. Made to work with CSS Modules!

Installation

Get it via npm:

npm install sass-resources-loader

Usage

Create your file (or files) with resources:

/* resources.scss */

$section-width: 700px;

@mixin section-mixin {
  margin: 0 auto;
  width: $section-width;
}

NB! Do not include anything that will be actually rendered in CSS, because it will be added to every imported SASS file.

Provide path to the file and apply loader in webpack config:

/* webpack.config.js */

module: {
  loaders: [
    // Apply loader
    { test: /\.scss$/, loader: 'style!css!sass!sass-resources' },
  ],
},

// Provide path to the file with resources
sassResources: './path/to/resources.scss',

// Or array of paths
sassResources: [ './path/to/vars.scss', './path/to/mixins.scss' ]

Now you can use these resources without manually importing them:

/* component.scss */

.section {
  @include section-mixin; // <--- `section-mixin` is defined here
}

import React from 'react';
import css from './component.scss';

// ...

render() {
  return (
    <div className={css.section} />
  );
}