Webpack config

Building the project

This library doesn't include a build, so it expects you to add it to your webpack config. The standard way of doing this is changing your js loader to be like this:

      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: [
          path.join(__dirname, 'YOUR_SRC_PATH'),
          path.join(__dirname, 'node_modules', '@klarna')
        ]
      },

This way all npm packages with the @klarna namespace will be built. If you want to just build this one, use:

path.join(__dirname, 'node_modules', '@klarna', 'ui')

If you are using sagui, add the following to your sagui.config.js or consult your local sagui expert:

  javaScript: {
    transpileDependencies: [
      '@klarna'
    ]
  },

In addition, you will need a sass+css modules loader:

      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css?modules,localIdentName=[local]',
          'sass'
        ]
      }

You can see more in the project's webpack.config.js.

Babel polyfill

The code inside this library relies on the babel-polyfill to work in older browsers. To use it, install babel-polyfill in your project:

npm install --save babel-polyfill

…and include it in the entrypoint of your app:

import 'babel-polyfill'

JS Minification

Minifying .js files in conjunction with .css minification breaks css modules.

Disable css-loader minimization if experiencing trouble:

      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css?modules,-minimize,localIdentName=[local]',
          'sass'
      }