Using SASS on your PCF Project

[Michaelfp]

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.  

Using the same approach for the python language I builder an npm package that helps to use the sass. Because the PCF using webpack to transform all the typescript code into javascript, which is supported by the browsers. For this they using an approach for the components that are called loader.

Loaders are plugin that pre-processes files different from javascript. Any kind of type that is different from javascript you will need a loader to pre-process before getting the code available for the browser. If you want more information about loaders you just go ahead in this link -> https://webpack.js.org/loaders/

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.

npm install --save-dev pcf-sass-loader file-loader extract-loader css-loader postcss-loader sass-loader

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
                    use: [
                       
                        {
                            loader: require.resolve('file-loader'),
                            options: {
                                name: '[folder]/[name].css' // create the compiled file in the same location that is configured in the project
                            }
                        },
                         {
                            loader: require.resolve("pcf-sass-loader"),
                        },
                        {
                            loader: require.resolve('extract-loader')
                        }, {
                            loader: require.resolve('css-loader'),
                            options: {
                                url: true
                            }
                        }, {
                            loader: require.resolve('postcss-loader')
                        }, {
                            loader: require.resolve('sass-loader')
                        }
                       
                    ]
                },

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.