Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin 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.
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.
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 `
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.
I want to do this too
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.