Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.