Including SuperflyCSS Builds in an Angular Project

Ole Ersoy
1 min readApr 28, 2020

--

Image by Claudia Peters from Pixabay

Scenario

We want to build CSS with the SuperflyCSS component-display and component-main components and include this in our Angular project.

Approach

Create a new SuperflyCSS project:

npm i -g @superflycss/cli
sfc new css
cd css

Next install the components:

npm i @superflycss/component-display @superflycss/component-main

Open src/main/css delete the content and import the dependencies:

@import "@superflycss/component-display";@import "@superflycss/component-main";

Then start verdaccio:

verdaccio

Within package.json change the package name to a namespaced name. We will use @fireflysemantics/css .

Now build the distribution and publish the CSS;

sfc bmc
npm publish

Install the project in the Angular project:

npm i @fireflysemantics/css

Import the CSS in styles.css :

@import "~@fireflysemantics/css/target/main/css/index.css"

And that’s a wrap.

Summary

We can produce CSS Components and Utilities in a separate CSS project and import that into our Angular project.

--

--