cancel
Showing results for 
Search instead for 
Did you mean: 

Using SASS on your PCF Project

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

 

2020-07-02_220655.jpg

 

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.

 

2020-07-02_221330.jpg

 

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.

 

Meet Our Blog Authors
  • PowerApps Community Mentor 2018, Practicing surgeon and former Professor of Surgery, University of Illinois, Chicago.
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim