Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

CSS import

StabilOppdatert 30. april 2025
CSS
npx @navikt/aksel css-imports

Bruk kommandolinje-verktøyet vårt til å håndtere CSS import i løsningen din. Da blir cascading + mye mer håndtert for deg!

Aksel tilbyr nå mer fleksibilitet når du skal importere komponent-styling til løsningen din. For de fleste vil det enkle ofte være det beste og all stylingen du trenger for å bruke Aksel kan hentes slik.

JSX
JSX/TSX
import "@navikt/ds-css";
CSS
@import "@navikt/ds-css";

Spesifisitet

Hvis man overskriver en del styling fra Aksel, ender man ofte opp med problemer med spesifisitet. Den nye CSS-løsningen layers løser dette. All styling importert fra Aksel vil her få lavest spesifisitet.

JSX
@import "@navikt/ds-css" layer(aksel);
Advarsel

layers er ikke støttet i safari 15.3 eller eldre. Dette vil kunne påvirke brukere av IOS-enheter eldre enn ~2016.

Minified og prefikset

CSS fra @navikt/ds-css er ikke minified eller prefikset rett ut av boksen, men fra v2.9.0 vil all CSS ha en ekstra *.min.css-versjon som håndterer dette.

CSS
@import "@navikt/ds-css/dist/index.min.css";

De fleste moderne bundlere og frameworks håndterer dette automatisk. Dette vil defor være mest nyttig hvis man laster CSS fra CDN eller andre løsninger som ikke kjører post-processing med f.eks. postcss, eks inlinet CSS.

Globale stiler

Man kan velge å manuelt trekke inn bare deler av det globale stilsettet. Hvis man fortsatt ønsker all komponent relatert styling finner man den i components.css.

CSS
Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css";
@import "@navikt/ds-css/dist/global/tokens.css";
@import "@navikt/ds-css/dist/global/reset.css";
@import "@navikt/ds-css/dist/global/baseline.css"; (required)
@import "@navikt/ds-css/dist/global/print.css";
Alle komponenter
@import "@navikt/ds-css/dist/components.css";
Advarsel

fonts.css og tokens.css kan bare fjernes hvis man manuelt overstyrer dette i egen løsning. Uten disse vil alle komponenter brekke!

De fleste vil nok også trenge å ha med print/reset, men finnes andre alternativ enn Aksel for det.

Opt-in komponentstyling

Det er ikke alltid man ønsker eller trenger å trekke inn all stylingen fra Aksel når man bruker komponentene. Dette vil være nyttig for web-components, løsninger som dekoratøren der hver eneste kB spart er viktig eller man bare ønsker å minske CSS-bundle med noen kB.

CSS
// Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css";
@import "@navikt/ds-css/dist/global/tokens.css";
@import "@navikt/ds-css/dist/global/reset.css";
@import "@navikt/ds-css/dist/global/baseline.css";
@import "@navikt/ds-css/dist/global/print.css";
// Komponent stiler
@import "@navikt/ds-css/dist/component/typography.css";
@import "@navikt/ds-css/dist/component/accordion.css";
@import "@navikt/ds-css/dist/component/alert.css";
@import "@navikt/ds-css/dist/component/button.css";
@import "@navikt/ds-css/dist/component/loader.css";

CSS Cascading er viktig her, slik at typography.css alltid må være først i komponent-listen. Kommandolinje-verktøyet vårt håndterer dette for deg!

CDN

All styling finnes versjonert på NAV-CDN.

HTML
Hele stilsettet
<link
rel="preload"
href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/index.min.css"
as="style">
</link>
----
Globale stiler
<link
rel="preload"
href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/global/baseline.min.css"
as="style">
</link>
....
Komponent stiler
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/typography.min.css" as="style"></link>
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/accordion.min.css" as="style"></link>
....

Hvis man velger å bruke CDN for lasting av CSS, burde man låse @navikt/ds-react (+ alle andre Aksel-løsninger) til samme versjon. CDN støtter ikke semver, så man må manuelt oppdatere versjoner og holde dem i synk.

Hva med @navikt/ds-css-internal?

Fra versjon 4.0.0 er all styling fra denne pakken flyttet inn i @navikt/ds-css. Den vil da også være tilgjengelig på CDN sammen med all annen styling.