Forum Discussion

spandl's avatar
spandl
Helper I
4 years ago

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

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    I want to do this too

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    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's avatar
      spandl
      Helper I
      3 years ago

      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.