Article
0 comment

Update on how to include 3rd party CSS in SharePoint Framework

Finally, we upgraded SASS to a new version of SASS, which brings tons of changes to your development. It started in SharePoint Framework version 1.15, and the transition is now completed in 1.16.1. While importing 3rd party CSS via ‘@import’ is still possible, this option will be lost at some point.

Title screen on Update on 3rd party CSS in SPFx

Let me explain what other options you have to import 3rd party CSS to your web parts or extension CSS.

An update to one of my old blog post on how to use 3rd party CSS.

@import marked as deprecated

There are two ‘@import’ options. One is the native CSS way of importing other style sheets in another style and the options in SASS using @import. In the past, it was confusing for many, so the syntax in SASS changed while the native import remained.

// CSS Native import
@import url(https://example.com/styles/someother.css)

// SASS import
@import 'partials/_someother.scss'

While in the current version, the ‘@import’ still works, I would not rely on it in any future and existing code.

Import 3rd party CSS using ‘meta.load-css’ and ‘@use’

The closest option to the old SASS import is to use ‘meta.load-css’. Here is the new syntax to load.

// Part 1: Import module
@use "sass:meta"

// Part 2: Your web part CSS styles
.webPartOuterDiv{
        // load partials/_someother.scss
    @include meta.load-css('partials/someother');

}

Part 1: Import a module

In SASS, common functions got now split into their modules, such as the ‘sass:meta’ module, which contains a couple of mixins.

// Part 1: Import module
@use "sass:meta"

In this regard, the ‘@use’ keyword functions like ‘import’ in typescript in the following way.

import { escape } from '@microsoft/sp-lodash-subset';

So we got all the functions, or as they are called, ‘mixin’ in SASS, into our style file.

Part 2: Import external file

Now with all common mixins of the ‘sass:meta’ imported, we can load the actual CSS file into our main SCSS file.

// Part 2: Your web part CSS styles
.webPartOuterDiv{
        // load partials/_someother.scss
    @include meta.load-css('partials/someother');

}

For this, we need to call a function in the “meta” module. To ‘call’ it, we have to use the ‘@include’ keyword followed by the function ‘meta.load-css’ and the path passed in the CSS file.

Final thoughts

The change to using ‘sass:meta’ and ‘meta.load-css’ finally arrived with SharePoint Framework 1.16.1 and should be the way forward.

While the old ‘@import’ syntax still works, and you see it all across the interweb, it might be removed from SASS in future. Even things like bootstrap show the old syntax.

The hTWOo framework will be updated soon in this new way. There are other things to consider, for example, when to ‘@use’ only and when to ‘meta.load-css’.

Writing SASS code in future feels more like writing Javascript but just for styles.

Fun fact: the ‘@use’ and ‘meta.load-css’ work is that they call JavaScript code behind the scene in the compiler.

Also check out:
What’s wrong with @import – SASS Documentation
@use – SASS Documentation
@sass:meta – SASS Documentation

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.