OSGI NPM Bundler portlet: CSS not loaded properly

RE: OSGI NPM Bundler portlet: CSS not loaded properly

2020-07-21T17:37:16Z

Hello Nils!,I'm actually have the same problem. Did you find the solution to fix it?, do you can help me?
Thanks in advance !

RE: OSGI NPM Bundler portlet: CSS not loaded properly

2019-09-27T07:57:03Z

Hi Ivan,
Thanks for your reply. I did tried the loaders in your Gthub repository, and I added

"liferay-npm-bundler":"2.13.2",
"liferay-npm-bundler-loader-style-loader":"2.13.2",

To my package.json. I also added the lines in your reply to my .npmbundlerrc, but all I got is a

"Load timeout for modules"

in my Javascript console, and nothing appears.
I noticed that bad imports caused this error, so when i try to import CSS like

import './index.css'

in my React components (with the .npmbundlerrc rule and the style-loader), it triggers that error.

Is there a way to fix it ? Maybe my CSS files are not in the correct directory, or I am missing something ?
Thanks again !

RE: OSGI NPM Bundler portlet: CSS not loaded properly

2019-09-27T07:17:33Z

Please see this issue for more information on the feature that allows you to use import/require css.
There used to be a sample application in this repo but now it's broken :-(. I will fix it ASAP.
Basically all you need to do is using a bundler >= 2.13.2 and configuring a rule like this in your .npmbundlerrc:

"rules": [
    {
      "test": "\\.css$",
      "use": ["style-loader"]
    }
]

OSGI NPM Bundler portlet: CSS not loaded properly

2019-09-26T13:25:03Z

Hi !
I'm currently working on a React portlet with a CSS import in the component property "com.liferay.portlet.header-portlet-css". It went well, and if i'm writing CSS references in that CSS files (ie @import "./filterBox.css") the portal loads it perfectly in "/o/[PortletContextName]/css/filterBox.css".
But when I'm trying that on a production environment, it looks for the file in "/", which results in a "Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type [...]"
Even if the file exists in the production environment at /o/[PortletContextName]/css it don't want to load it from that location.
Is it some sort of configuration that I could have written that override that process of fetching CSS files ?
Thanks in advance !