# Search UI styles are not read in production build of Gatsby **URL:** \ **Category:** Elastic Search\ **Tags:** elastic-site-search\ **Created:** [November 5, 2019, 12:56am UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501 "2019-11-05T00:56:47Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 5, 2019, 12:56am UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/1 "2019-11-05T00:56:47Z")
Hi Team, As i am actively building a Site Search with SearchUI and did a production build of Gatsby, interestingly Paging is the only component i used directly with built-in styles. I could see default pagination in development code like \<1 2 \> . but in Gatsby production build there are no styles applied and i see unordered list like below - 1 - 2 Implementation ways : import { Paging } from '@elastic/react-search-ui'; import '@elastic/react-search-ui-views/lib/styles/styles.css'; And simply imported in the render component. Am not sure did i miss anything in implementation ., could any one help me on this. ---
**Author:** ![Vadim\_Yakhin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadim_yakhin/32/56723_2.png) [@Vadim\_Yakhin](https://discuss.elastic.co/u/Vadim_Yakhin)\ **Post date:** [November 5, 2019, 1:33pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/2 "2019-11-05T13:33:22Z")
Hey @sarrame, Although it's a little hard to say what exactly causes the issue in your case, I have one idea. You're importing stylesheets from the react component. But Gatsby docs say that you should import global stylesheets from `gatsby-browser.js`: > **[Standard Styling with Global CSS Files](https://www.gatsbyjs.org/docs/global-css/#adding-global-styles-without-a-layout-component)** > > Traditionally, websites are styled using global CSS files. Globally-scoped CSS rules are declared in external .css stylesheets, and CSS… I hope this will help you, but if it won't, could you create a minimal example in a public repo? (don't forget to remove your credentials). ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 5, 2019, 2:16pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/3 "2019-11-05T14:16:33Z")
Thanks Vadim , this hint saved me 🙂 import '@elastic/react-search-ui-views/lib/styles/styles.css'; didn't worked even in gatsby-browser.js, so i added the css styles in node js import way ( require ) and only by then i could see styles adding to the build version of files. Interestingly Boostrap , which is also a global styles is referred directly in the initial component and it added to build version why is this special case for certain external css. ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 5, 2019, 2:38pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/4 "2019-11-05T14:38:58Z")
I have seen this kind of error when importing react-search-ui files is that the reason i am unable to find the file using import ? Could not find a declaration file for module '@elastic/react-search-ui'. '/Users/..../node\_modules/@elastic/react-search-ui/lib/index.js' implicitly has an 'any' type. Try `npm install @types/elastic__react-search-ui` if it exists or add a new declaration (.d.ts) file containing `declare module '@elastic/react-search-ui';`ts(7016) ---
**Author:** ![Vadim\_Yakhin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadim_yakhin/32/56723_2.png) [@Vadim\_Yakhin](https://discuss.elastic.co/u/Vadim_Yakhin)\ **Post date:** [November 6, 2019, 1:26pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/5 "2019-11-06T13:26:32Z")
Thanks for telling about this. That's an interesting issue and we'll need to investigate. I created an issue in the repo: [https://github.com/elastic/search-ui/issues/435](https://github.com/elastic/search-ui/issues/435) Just a thought: maybe the reason is that we are asking users to import styles using a direct link to the styles file. Bootstrap, on the other hand, has shortcuts: [https://github.com/twbs/bootstrap/blob/master/package.json#L73-L75](https://github.com/twbs/bootstrap/blob/master/package.json#L73-L75). But that's only a guess. ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 6, 2019, 7:38pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/6 "2019-11-06T19:38:05Z")
Thank you for taking step ahead, i am still wondering around the difference between require('@elastic/react-search-ui-views/lib/styles/styles.css'); and import '@elastic/react-search-ui-views/lib/styles/styles.css'; ---
**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\ **Post date:** [November 12, 2019, 2:18pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/7 "2019-11-12T14:18:25Z")
@sarrame I don't know why this is not working. I've entered an issue on the Gatsby project, trying to find answers. [https://github.com/gatsbyjs/gatsby/issues/19446](https://github.com/gatsbyjs/gatsby/issues/19446) ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 12, 2019, 5:24pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/8 "2019-11-12T17:24:49Z")
@JasonStoltz , Appreciate the steps taken 🙂 ---
**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\ **Post date:** [November 12, 2019, 5:52pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/9 "2019-11-12T17:52:13Z")
@sarrame It appears to be an issue in Gatsby. They provided a workaround which worked for me and should work for you. Change your import to the following: ```auto import styles from "@elastic/react-search-ui-views/lib/styles/styles.css" // IMPORTANT: Keep this line, it is a workaround to make imported styles work in // Gatsby: https://github.com/gatsbyjs/gatsby/issues/19446 if (!styles) { console.log("Failed to include styles") // This should never run } ``` ---
**Author:** ![sarrame](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sarrame](https://discuss.elastic.co/u/sarrame)\ **Post date:** [November 12, 2019, 6:06pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/10 "2019-11-12T18:06:54Z")
@JasonStoltz Yes seen the thread, sure will try and let you know 🙂 ---
**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\ **Post date:** [November 14, 2019, 8:27pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/11 "2019-11-14T20:27:55Z")
Noting it here, that the root cause is an issue in our package: [https://github.com/gatsbyjs/gatsby/issues/19446#issuecomment-553019807](https://github.com/gatsbyjs/gatsby/issues/19446#issuecomment-553019807). Hopefully the workaround is sufficient for now. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [December 12, 2019, 8:28pm UTC](https://discuss.elastic.co/t/search-ui-styles-are-not-read-in-production-build-of-gatsby/206501/12 "2019-12-12T20:28:17Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.