Forum Discussion

Túlio's avatar
Túlio
Frequent Visitor
2 years ago
Solved

How can I configure CSS modules to style my visual with react - powerbi-visuals-api

How can I access "styles.title" like the example below?           import * as React from "react"; import styles from "./styles.module.css"; export class Visual implements IVisual { con...
Need Help
  • Túlio's avatar
    Túlio
    2 years ago

    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]'
		  }
		},
	  },
	],
}

     

Anonymous's avatar
Anonymous
Not applicable
2 years ago

Hi, Túlio 
 

Thanks for your detailed explanation, I am more than willing to help you out.
 

As far as I understand, if you want to go through a custom CSS file, I hope you can check if it meets the requirements of the custom visual.

Here are the relevant documents I found that I hope will help you:
Create a React-based visual for Power . - Power BI | Microsoft Learn
Get your Power BI visuals certified - Power BI | Microsoft Learn
 

Of course, if you only want to implement custom visuals in Desktop, you can try to find out if there are similar custom visuals in your app that can run your CSS files.


For the issue you mentioned, it would be more advisable to post your question in Custom Visuals Development community to get professional support in time.We've now moved your question to that forum.

 

Here is the link to the forum you need:
Custom Visuals Development Discussion - Microsoft Fabric Community

Best Regards,

Leroy Lu