Forum Discussion
How can I configure CSS modules to style my visual with react - powerbi-visuals-api
I changed the property "esModules" to false, which works for me.
{ test: /\.css$/, include: /\.module\.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { esModule: false, modules: { localIdentName: '[name]__[local]__[hash:base64:5]' } }, }, ], }
You need to make sure your project has the dependencies required by CSS modules installed. You may need the css-loader dependency required by Webpack. Here is the code to install the corresponding dependencies:
npm install css-loader style-loader --save-dev
Modify your Webpack configuration to support CSS modules:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
Create a CSS Modules file:
/* styles.module.css */
.title {
color: blue;
font-size: 24px;
font-weight: bold;
}
In your React component or Power BI visual, import the CSS module:
import * as React from "react";
import styles from "./styles.module.css";
export class Visual implements IVisual {
constructor(options: VisualConstructorOptions) {
const element = document.createElement("div");
element.className = styles.title; // This accesses the .title class from your CSS module
element.innerText = "Hello, Power BI!";
options.element.appendChild(element);
}
}
When you set element.className to styles.title , it applies the styles defined in the CSS module to that element. The class name is automatically scoped to avoid conflicts with other styles.
hackcrr
If I have answered your question, please mark my reply as solution and kudos to this post, thank you!
This is not working for me. I'm still not able to import it as
import styles from "./styles.module.css";
Is there some other solution?
I changed the property "esModules" to false, which works for me.
{ test: /\.css$/, include: /\.module\.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { esModule: false, modules: { localIdentName: '[name]__[local]__[hash:base64:5]' } }, }, ], }Hi, Túlio
We are very glad to know that the issue has been resolved. If you wish, consider accepting your solution as a solution that will also benefit other community members who have the same problem as you and find a solution faster.Of course, if there is anything else we can do for you, please do not hesitate to contact us.
Looking forward to your reply.
Best Regards,
Leroy Lu