Fabric is Generally Available. Browse Fabric Presentations. Work towards your Fabric certification with the Cloud Skills Challenge.
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
Check out the November 2023 Power BI update to learn about new features.
Read the latest Fabric Community announcements, including updates on Power BI, Synapse, Data Factory and Data Activator.