Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Join us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.

Reply
spandl
Helper I
Helper I

Using SASS instead of LESS in Power BI custom visual?

Is it possible to use SASS instead of LESS to add styles to a poer bi custom visual?

 

I already have some code ready that is written in SASS and would like to avoid maintaining two versions.

 

Thanks.

3 REPLIES 3
Anonymous
Not applicable

I was able to pull it off by first running `npm install sass-loader sass --save-dev`.

Then I changed my webpack.config.js file (it was located in `%APPDATA%/npm/node_modules/powerbi-visuals-tools/lib/webpack.config.js) to say this in the module section about less:

 

 

{
    test: /(\.s[ac]ss)|(\.css)$/i,
    use: [
        {
            loader: MiniCssExtractPlugin.loader
        },
        {
            loader: require.resolve('css-loader')
        },
        "sass-loader",
    ]
},

 

or

 

{
    test: /(\.s[ac]ss)|(\.css)$/i,
    use: [
        {
            loader: MiniCssExtractPlugin.loader
        },
        {
            loader: require.resolve('css-loader')
        },
        {
            loader: 'sass-loader',
            options: {
                // Prefer Dart Sass
                implementation: require('sass'),

                // See https://github.com/webpack-contrib/sass-loader/issues/804
                webpackImporter: false,
                sassOptions: {
                    includePaths: ['./node_modules']
                },
            }
        }
    ]
},

 

 

 

Make sure you also replace the section in your `visual.ts` file where it imports `import "./../style/visual.less";` to `

import "./../style/visual.scss";`

This should be integrated from by the Power BI team.

 

I find it a bit risky to change a package. As this is an open source repo (is it, really?), you may want to create a PR.

 

The solution I opted for the moment is to pre-process the CSS with webpack before I use `pbiviz start`. 

Disadvantage: I have to call this each time I make changes to the SCSS files, which fortunately is rare.

Anonymous
Not applicable

I want to do this too

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors
Top Kudoed Authors