This website uses cookies to ensure you get the best experience. Learn More.
How to use SASS in React Widget Liferay
In a native React application, it is common that you have the CSS separated by components like I said here, actually maybe you want to use a separate SCSS to take advantage from SASS. So to do it in a Liferay React Application, we need to do some configurations.
Why?
We are working a Structure of OSGi Bundles Containing NPM Packages wrapper by Portlet Component, for this reason, by default you have this style.css loaded by a portlet-header, and if you try to use a separate CSS or SASS file by component doesn't work and you will get an error.
So basically always when a developer wants to add new styles always needs to be put on assets/css/style.css file right? Not all... so you should be asking for “how can I have my components and scss modularized in this React Widget?” The answer is with “sass-loader” and “css-loader” and in this tutorial you will know the few steps to do it.
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.scss” and add the following style:
$pink-color: pink;
.pink-background{
background-color: $pink-color;
}
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-sass-loader, which will run a sass or node-sass from your project and convert a SASS or SCSS file to CSS files.
npm install --save-dev liferay-npm-bundler-loader-sass-loader
7. 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
8. 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": "\\.scss$",
"use": ["sass-loader","css-loader"]
}]
9. The final .npmbundlerrc should look like this:
10. Now deploy it
npm run deploy
11. Add the application to Liferay Portal’s page and now it should look like the image below: