Using SASS instead of LESS in Power BI custom visual?

[spandl]

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.

[Anonymous]

I want to do this too

[Anonymous]

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";`

[spandl]

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.