Embed external CSS in Flex's swf file

Question

I want a few Flex (SDK 4.6) applications to share the same stylesheet (stored in CSS file). However I do not want to distribute standalone file along those applications' SWFs, but rather want to embed the CSS file into Flex application file (just as you embed images etc.). CSS declarations include font-embeddings so it is (I think) impossible to load CSS at runtime.

What I already found out:

1. I cannot simply use <fx:Script source="@Embed(stylesheet.css)" />. Wrong syntax.

2. I cannot use inline stylesheet in some MXML component that is shared among applications because CSS contains type declarations which are not allowed in components.

3. I can choose to compile CSS to SWF but this creates standalone SWF file (so I can embed Flex framework into SWF but not a standalone CSS ;]).

I hope I am missing something obvious and this is fairly easy to achieve.

Answer 1

• Create a library project (producing a swc file)
• Add the stylesheet as a resource
• Put this project (or the compiled swc) on your other project's build path
• You can now use this resource from within your other projects:
  <fx:Style source="stylesheet.css" />

As an example:
In the librabry project you have src/stylesheet.css
If src is a source folder, the file should automatically be packaged into the library
If it's not, you'll have to manually add the files: in FlashBuilder this can be done through the Assets tab of the Build path editor. On the command line, add it with the -include-file option.

An alternative to using the swc as a library dependency, is to define it as a theme dependency. In FlashBuilder there's a Theme wizard in the project properties. On the command line do:

mxmlc -theme="/path/to/my/theme.swc" MyApp.mxml

If you use it as a theme, you don't even have to include the fx:Style tag in your Application. The CSS is included by default. But I think it has to be named defaults.css.