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

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 = {
  // Default for the style loading
  styleLoaders: ["style-loader", "css-loader", "sass-loader"],
  // 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',
  type: 'visualforce'
};

type property specifies which css dependencies will be imported:

• default used if not specified by default
• visualforce
• scoped
• lightning
• internal

extract-text-webpack-plugin

Configure style loader in slds.config.js.

Example:

module.exports = {
  // If you want to use the ExtractTextPlugin
  extractStyles: true
};

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