Skip to content

Css Imports

David Rettenbacher edited this page Dec 17, 2017 · 5 revisions

Importing External Stylesheets

Import a file, an application resource (in ResourceDictionary) or embedded resource by using the @import "<source>"; statement. You can use this statement in every css file to share variables, mixins or style-declarations.

Files

Write the relative path with forward-slashes or double backward slashes, i.e.
@import "a/relative/path.scss"; or
@import "a\\relative\\path.scss";

Application Resource in ResourceDictionary

Write the key of the resource into the quotes.
@import "applicationResourceKey";

Embedded Resource

Include the "path" of the embedded resource. If the file embedded-style.scss was placed in the folder my/resource/path, then the correct path is
@import "my/resource/path/embedded-style.scss"; or
@import "my\\resource\\path\\embedded-style.scss";.

Notice

Don't forget to set the Build Action of the (s)css-file to "Embedded Resource".

Important Note

For XamlCSS to be able to localize your embedded resource, check the following:

  1. Ensure that the default-namespace and the assembly-name are the same.
    I.e if your assembly is named "My.Great.Assembly", then the default-namespace should be exactly the same.

  2. On Xamarin or UWP provide search assemblies
    When you call Css.Initialize(...), be sure to provide assemblies containing embedded css-styles. UWP and plattforms Xamarin.Forms runs on don't support enumerating all assemblies so you have to provide them explicitly. I.e. XamlCSS.XamarinForms.Css.Initialize(this, new []{ typeof(TypeInAssemblyContainingEmbeddedCssStyles).Assembly });
    Most of the time the assembly containing the embedded (s)css-file is the one containing your App.cs file, so you can write:
    XamlCSS.XamarinForms.Css.Initialize(this, new []{ typeof(App).Assembly }); // this is an instance of App

Sample

@import "My/Relative/path.scss";
@import "applicationResourceKey";
@import "My/Resource/Path/EmbeddedStyle.scss";