# Custom Webpack settings integration with kibana plugin

**URL:** <https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162>\
**Category:** Kibana\
**Created:** [August 14, 2019, 8:26am UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162 "2019-08-14T08:26:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeep\_c8](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pradeep_c8/32/53010_2.png) [@pradeep\_c8](https://discuss.elastic.co/u/pradeep_c8)\
**Post date:** [August 14, 2019, 8:26am UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/1 "2019-08-14T08:26:45Z")

</div>

Hi,

Am trying to merge my react application with kibana plugin, In my react application I used webpack server and webpack configurations, I used alias to refer my files, I need those configs to be inserted with kibana plugin.

But kibana not accepting my webpack configs. It will be good to get suggestion from you guys to import custom webpack configuration for kibana-plugin

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [August 14, 2019, 5:29pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/2 "2019-08-14T17:29:01Z")

</div>

Hey @pradeep_c8

I'd suggest looking into babel plugins that you can use to rewrite babel imports before packaging your plugin in the future, or using a code shift to rewrite your imports to relative paths.

Customizing the webpack aliases Kibana exposes isn't recommended, and could break any time, but for now you can define `uiExports. __globalImportAliases__ ` in your plugin to define aliases that will be merged into the Kibana webpack config.

Good luck!

---

<div class="post-metadata">

**Author:** ![pradeep\_c8](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pradeep_c8/32/53010_2.png) [@pradeep\_c8](https://discuss.elastic.co/u/pradeep_c8)\
**Post date:** [August 16, 2019, 5:01pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/3 "2019-08-16T17:01:25Z")

</div>

Hi @spalger,

Thanks for your suggestion UIExports. **globalImportAliases** works fantastic, Now i can able to use alias throughout the project.

One thing is not getting resolved:

I uses scss styles throughout the application in almost every file. Am getting the below error

```
Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

```

On compiling the source. Any idea to get rid of this?

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [August 16, 2019, 11:20pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/4 "2019-08-16T23:20:09Z")

</div>

@pradeep_c8 Hmm, well, that sounds a lot like webpack trying load a file type it doesn’t understand.

Are you importing the sass files?

You’ll need to import the css instead.

Can you share additional info or maybe a like to code on Github?

---

<div class="post-metadata">

**Author:** ![pradeep\_c8](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pradeep_c8/32/53010_2.png) [@pradeep\_c8](https://discuss.elastic.co/u/pradeep_c8)\
**Post date:** [September 4, 2019, 7:29am UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/5 "2019-09-04T07:29:26Z")

</div>

@spalger, Sorry for the long time.

importing css, is too difficult. Since am just referring the react components from other projects inorder to reduce code duplication. They used scss file in every component, changing all the component makes very huge process, they are not recommending that.

Meanwhile, I have just created a sample project. please check the repo below to get an idea about my problem

```
https://github.com/pradeepravi-cse/kibana-sass-import-plugin

```

![Screenshot%20from%202019-09-04%2012-56-48](https://us1.discourse-cdn.com/elastic/original/3X/b/d/bd862bce408dcda57b6639034a4ee053a1603fe2.png)

![Screenshot%20from%202019-09-04%2012-58-58](https://us1.discourse-cdn.com/elastic/original/3X/5/8/58c840d3de29fb6cc95db97587134f5584a6a273.png)

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [September 4, 2019, 4:02pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/6 "2019-09-04T16:02:14Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![pradeep\_c8](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pradeep_c8/32/53010_2.png) [@pradeep\_c8](https://discuss.elastic.co/u/pradeep_c8)\
**Post date:** [September 5, 2019, 8:35am UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/7 "2019-09-05T08:35:01Z")

</div>

@splager

Thanks for the updated. I have installed the sass-loader and inserted the code as you told above. But still, am facing the issue but with a tiny difference.

previously it shows  
`You may need an appropriate loader to handle this file type`.

But now it showing like

`You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders`

And i forgot to mention a thing. Am using kibana v6.8.2. I Assume the above method will work with 7.0 or later version. Correct me if am wrong

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [September 5, 2019, 2:16pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/8 "2019-09-05T14:16:49Z")

</div>

Can you share the complete error message from the console?

Is it failing for the same file?

If you put a `console.log()` in the ` __bundleProvider__ ` function does it execute?

---

<div class="post-metadata">

**Author:** ![pradeep\_c8](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pradeep_c8/32/53010_2.png) [@pradeep\_c8](https://discuss.elastic.co/u/pradeep_c8)\
**Post date:** [September 5, 2019, 2:57pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/9 "2019-09-05T14:57:49Z")

</div>

Yes the function gets executed and i can see the console.log aswell

 ![Screenshot%20from%202019-09-05%2020-27-08](https://us1.discourse-cdn.com/elastic/original/3X/2/8/2874f2f72a6ecbdf3641e771f49eec6c40ac3aad.png)

 ![Screenshot%20from%202019-09-05%2020-26-35](https://us1.discourse-cdn.com/elastic/original/3X/9/a/9a914b4b7ae10b0c21f8d9967d04e313f49f4286.png)

 ![Screenshot%20from%202019-09-05%2020-24-29](https://us1.discourse-cdn.com/elastic/original/3X/6/1/61f485427fa066c3775c50faebe2a74b0739402b.png)

 ![Screenshot%20from%202019-09-05%2020-25-04](https://us1.discourse-cdn.com/elastic/original/3X/9/7/972c7a9b32942091e19281ee4e4a5c18af7ced0a.png)

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [September 5, 2019, 10:47pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/10 "2019-09-05T22:47:38Z")

</div>

Okay, perhaps you just need the more complete config from [https://github.com/webpack-contrib/sass-loader](https://github.com/webpack-contrib/sass-loader)

```auto
{
  test: /\.scss$/i,
  use: [
    // Creates `style` nodes from JS strings
    'style-loader',
    // Translates CSS into CommonJS
    'css-loader',
    // Compiles Sass to CSS
    'sass-loader',
  ],
},

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 3, 2019, 10:47pm UTC](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/11 "2019-10-03T22:47:46Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.