Custom Webpack settings integration with kibana plugin

Elastic Stack Kibana
6

Okay, well in order to support importing scss files in Kibana you're going to have to get a little creative. What you can do is modify the webpack config directly from your plugin with something like this:

uiExports: {
  __bundleProvider__(kbnServer) {
    const defaultGetExtendedConfig = kbnServer.uiBundles.getExtendedConfig;

    kbnServer.uiBundles.getExtendedConfig = (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.scss$/,
        loader: require.resolve('sass-loader') // make sure to install in your plugin
      })

      return defaultGetExtendedConfig.call(kbnServer.uiBundles, webpackConfig);
    };
  }
}

I hope it goes without saying, that this is also very unsupported and might not be possible after some time.

Going forward you're probably going to want to setup your own webpack configuration and prebuild the code for your plugin, then setup Kibana to optimize with the built version of your plugin, rather than trying to optimize the raw source of your plugin.

1 Like