This website uses cookies to ensure you get the best experience. Learn More.
How to use separate CSS by Component in React Widget Liferay
When we generate a React Widget project for Liferay DXP from Yeoman (liferay-js template), you can see, in the scaffolding, we have the CSS file in assets/css folder with the style.css file (set to load on our portlet-header, in the package.json).
It is common, in a native React application to have the CSS separated by components. So to have the CSS separated by components in a Liferay React Application, we need to apply some configurations.
Why?
Because in a Liferay React Application we are working with a Structure of OSGi Bundles Containing NPM Packages, for this reason you have this style.css file loaded by a portlet-header by default, and if you try to use a separate CSS by component it won’t work and you will get an error.
So you're thinking that when a developer wants to add a separate style file, they always need to import the css file for the style.css, right? Yes and no... so you must be asking yourself “How can I have my components and css modularized in this Liferay React Widget?”
The answer is: with “css-loader”. In this tutorial we see the few steps to do this.
Requirements: Node, Yeoman and NPM Installed
1. First, it is necessary to install liferay-js by running this command:
npm install -g generator-liferay-js
2. Run the generator inside your “liferay-workspace/modules” or some other project folder which you are using
yo liferay-js
3. Choose the “React Widget” type and fill in the rest of the information needed:
4. Inside src create a CSS file “AppComponent.css” and add the following style:
.pink-background{ background-color: pink; }
5. Open AppComponent.js file from source and add at the first div the className “pink-background” and save it.
6. Now we need to install the liferay-npm-bundler-loader-css-loader, which will convert CSS files to JavaScript modules and when the application is on the page will download it as CSS files from the server.
npm install --save-dev liferay-npm-bundler-loader-css-loader
7. Now to do the configuration for works the CSS by URL you need to set the “source” and “rules” in .npmbundlerrc, adding the follow it code:
"sources" : ["src", "assets"],
"rules": [
{"test": "\\.css$",
"use": ["css-loader"]
}]
8. The final .npmbundlerrc file should look like this:
9. Now deploy it, executing :
npm run deploy
10. Add the application to Liferay Portal’s page and now you should see your separated CSS working on.
Good to Know… differences between “...css-loader” and “...style-loader”: If you want to inject the styles inside the HTML’s DOM from your component instead of having the CSS file separated downloading you can use the “liferay-npm-bundler-loader-style-loader”. You only need to change the step 6 and 7 from this tutorial for theses steps below:
11. Now we need to install the liferay-npm-bundler-loader-style-loader, which will convert CSS files to JavaScript modules and inject inside HTML when required.
npm install --save-dev liferay-npm-bundler-loader-style-loader
12. Now to do the configuration for works the CSS by URL you need to set the “source” and “rules” in .npmbundlerrc, adding the follow it code:
{
"test": "\\.css$",
"use": ["style-loader"]
13. The final .npmbundlerrc file should look like this:
Pretty easy :) , huh?