cancel
Showing results for 
Search instead for 
Did you mean: 

Fabric is Generally Available. Browse Fabric Presentations. Work towards your Fabric certification with the Cloud Skills Challenge.

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
PBI November 2023 Update Carousel

Power BI Monthly Update - November 2023

Check out the November 2023 Power BI update to learn about new features.

Community News

Fabric Community News unified experience

Read the latest Fabric Community announcements, including updates on Power BI, Synapse, Data Factory and Data Activator.

Power BI Fabric Summit Carousel

The largest Power BI and Fabric virtual conference

130+ sessions, 130+ speakers, Product managers, MVPs, and experts. All about Power BI and Fabric. Attend online or watch the recordings.

Top Solution Authors