In continuous of the last post that I wrote about using Python inside our Power Apps Component Framework. I this post I'll show how we can user SASS inside our PCF projects.
If you don´t know what it is SASS. It's a preprocessor style sheet language, that increases some actions that are not supported on the CSS.
Let's go for the funny things! 😎
Create your PCF project. Could be both Field or Dataset. After creating the project, we will install the packages.
God! Now we need to make some changes to the webpack build process inside our pcf. Unfortunately, Microsoft did not release a location that we can add modules, loaders, and plugins without change the pcf-scripts.
Open the location /node_modules/pcf-scripts and edit the file webpackconfig.js
Now, find the method getWebPackConfig, on the module code, inside the rules, add the following piece of code.
test: /\.scss$/, //find per files that is sass
name: '[folder]/[name].css' // create the compiled file in the same location that is configured in the project
Now, we need to change our manifest file and put the same name that is using on ".sass" file, to execute the copy on the output. At this time is not possible to change the manifest before the build and because of the framework signal that CSS file is referenced.
Now, it just executes the build running "npm run build" and magics begin! 😄
You will see that a new CSS file (with the same name of sass file) was created in the same folder. This is required because to do the reference.