Webpack error when trying to load CSS file in Kibana 7.8

Elastic Stack Kibana
1

I have Kibana 7.8 running in a Docker container. I'm trying to pull over a plugin I have in Kibana 7.5. I load a CSS file from within my visualization.js file. In Kibana 7.8, it is giving me the following error when it tries to load the CSS file:

ERROR in ./public/components/dod-equities.css 1:0
       │          Module parse failed: Unexpected character '#' (1:0)
       │          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
       │          > #title-div {
       │          |    font-size: 1.1em;
       │          |    font-weight: 600;
       │           @ ./public/components/visualization.js 22:0-29
       │           @ ./public/plugin.ts
       │           @ ./public/index.ts

Do I have to manually add a CSS webpack loader to allow Kibana 7.8 to load CSS files? I didn't have to do this for Kibana 7.5.

2

Can you show the code for the file importing the css file?

3

Here's the import section of my code.:

'use strict'
import React from "react";
import ReactTable from "./ReactTable";
import { orderBy } from "natural-orderby";
import Exceljs from "exceljs";
import _ from "lodash";
import "./dod-equities.css";
import { 
   EuiButton, 
   EuiModal,
   EuiOverlayMask,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiModalBody,
   EuiLoadingSpinner 
} from "@elastic/eui";

As I stated in my previous post, this code is working in Kibana 7.5. I'm just trying to port it over to 7.8.

4

As a work around, I converted the dod-equities.css file into a SCSS file (dod-equities.scss) and Kibana 7.8 read that file just fine. I'd still like to be able to load standard CSS files as well.

5

Good catch, I think it's just not supported in another way right now.
If you want, you can open a feature request here: https://github.com/elastic/kibana/issues/new?template=Feature_request.md

6

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