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 { 
    constructor(options: VisualConstructorOptions) { 
        const element = document.createElement("div"); 
        element.className = styles.title; 
        element.innerText = "Hello, Power BI!"; 
        options.element.appendChild(element); 
    } 
}

 

 

 

 

 

I am using "powerbi-visuals-api": "5.11.0"

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