slds-loader

Salesforce Lightning Design System (slds) configuration and loading package for webpack, using @salesforce-ux.

Based on font-awesome-sass-loader by Francis Besset (@francisbesset).

Usage

To properly load @salesforce-ux fonts, you need to configure loaders in your webpack.config.js. Example:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
    ]
  }
};

The Regex for font types are adjusted to support these formats. Regex also support urls ending with .woff, .ttf, .eot and .svg.

Complete SLDS

To use the complete slds package including all styles with the default settings:

require("slds-loader");

Custom configuration

You can configurate slds-loader with two configuration files:

• slds.config.js
• and set sldsCustomizations option

Add both files next to each other in your project. Then:

require("slds-loader!./path/to/slds.config.js");

Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [
    "slds-loader!./path/to/slds.config.js",
    "your-existing-entry-point"
  ]
};

slds.config.js

Example:

module.exports = {
  sldsCustomizations: "./_slds.config.scss",
 
  // if global wrapper class is needed to prevent style bleed in Visualforce pages.
  // set value to and empty string if no wrapper class is needed.
  globalWrapperClass: '.yourGlobalClassName',
 
  styles: {
    "activity-timeline": true,
 
    "datepickers": true,
    "modals": true,
 
    "spinners": true,
    "tabs": true,
  }
};

_slds.config.scss

Imported after SLDS's default configuration, but before components and untilities.

You may customize SLDS here.

Example:

$color-background-inverse: #eee;
$color-background-path-complete: #ddd;

extract-text-webpack-plugin

Configure style loader in slds.config.js.

Example:

module.exports = {
  styleLoader: require("extract-text-webpack-plugin").extract("style-loader", "css-loader!sass-loader"),
 
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.