NYPL Design System Styles

For an overview of the entire Design System, check out the Design System README.

How to Use

The Design System Styles provides the full and uncompiled scss files. The product is responsible to import the styles into its project. To import the package, run

  npm install --save @nypl/design-system-styles

Configurations need to be updated to support importing files. Check out the react storybook config or the twig storybook config as full examples.

To set it up, the node-sass-glob-importer is required. In your webpack file make sure to include it and use it as an importer with the sass-loader:

// webpack.config.js
const globImporter = require('node-sass-glob-importer');

module.exports = async({ config, mode }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      ...
      {
        loader: 'sass-loader',
        options: {
          importer: globImporter(),
        }
      }
    ]
  });

  // other configs
};