Using custom CSS in edit mode

TL;DR
You can dynamically load your custom CSS for your components in edit mode via the xstyle/css plugin. Simply require the plugin with the relative path to your stylesheet as a parameter, e.g. xstyle/css!./path/to/stylesheet.css

Dynamically Loading CSS

When you develop a custom component for the edit interface in EPiServer it is often the case that you need to have custom CSS to make it look great. In large JavaScript applications, like the edit interface in EPiServer 7.5, it can be beneficial to dynamically load resources such as CSS. The less you need to load at startup the better the startup performance will be, obviously. As you all should know, EPiServer uses an AMD loader to load JavaScript. One of the great things about AMD is that it gives us the ability to load JavaScript dynamically. So when you use the edit interface, things like editors or different views aren't loaded until they are actually needed.

The next great thing about AMD is that it has a concept of plugins. A plugin is a JavaScript module within AMD which loads another file and returns that to the loader instead of itself. For example both dojo/text and epi/i18n are examples of plugins that return file text (good for loading templates) and EPiServer localizations respectively.

We also have the xstyle/css plugin whose sole purpose is to load CSS files.

define([
    'dojo/_base/declare',
    'xstyle/css!./path/to/stylesheet.css' // PRO-TIP: Place this last since it doesn't return anything.
], function(declare) {

    return declare([], {
        // ...
    });

});

In the above example you can see that we are requiring the plugin and passing through the relative path to the stylesheet as a parameter. The exclamation mark indicates that the module should be loaded as a plugin and then AMD takes care of passing through the remaining string as a parameter to the plugin. The plugin will then parse this string and add a link node, with the path as its href attribute, to the head element of the page causing the referenced CSS file to be loaded into the page.