SASS Installation

Use the instructions below for how to reference SASS when using the NICE Design System. Use the following paths for node-sass includePaths option:

node_modules/@nice-digital/design-system/src/stylesheets
node_modules/@nice-digital/icons/dist

Grunt

Use grunt-sass to build from souce SASS. First install dependencies:

grunt dependencies


yarn add @nice-digital/design-system grunt grunt-sass

Then reference the source SASS via the includePaths option:

gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        includePaths: [
          'node_modules/@nice-digital/design-system/src/stylesheets',
          'node_modules/@nice-digital/icons/dist'
        ]
      },
      dist: {
        files: {
          'main.css': 'scss/main.scss'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', ['sass']);
};

Then in your application’s SASS import the design system via: @import 'index';.

Webpack

Use sass-loader with extract-text-webpack-plugin when building with webpack. First install depdencies:

webpack dependencies

yarn add @nice-digital/design-system webpack css-loader sass-loader node-sass extract-text-webpack-plugin

Then your webpack.config.js would look something like:

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
  filename: "[name].[contenthash].css"
});

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: extractSass.extract({
        use: [{
          loader: "css-loader"
        }, {
          loader: "sass-loader",
          options: {
            includePaths: [
              'node_modules/@nice-digital/design-system/src/stylesheets',
              'node_modules/@nice-digital/icons/dist'
            ]
          }
        }]
      })
    }]
  },
  plugins: [
    extractSass
  ]
};

Then in your app’s JavaScript you can use require("./main.scss"); which in turn has @import 'index';.

Edit on GitHub

This site is no longer maintained