Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: OSGI NPM Bundler portlet: CSS not loaded properly
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 !
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 !
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"]
}
]
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"]
}
]
Hi Ivan,
Thanks for your reply. I did tried the loaders in your Gthub repository, and I added
To my package.json. I also added the lines in your reply to my .npmbundlerrc, but all I got is a
I noticed that bad imports caused this error, so when i try to import CSS like
Is there a way to fix it ? Maybe my CSS files are not in the correct directory, or I am missing something ?
Thanks again !
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"I noticed that bad imports caused this error, so when i try to import CSS like
import './index.css'Is there a way to fix it ? Maybe my CSS files are not in the correct directory, or I am missing something ?
Thanks again !
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 !
Thanks in advance !