Style sheets for mskcc components in
scssandcssformats.
The DSM requires Dart Sass in order to compile. It uses Sass modules to organize the codebase and provide exports to use.
If you're new to Sass, check out these resources:
- Sass Basics
- Webpack with Sass
- Next.js with Sass
- Create React App with Sass
- Parcel with Sass
- Vite with Sass
- Snowpack with Sass
npm install --save-dev sassnpm install @mskcc/components// import all component styles, no need to import components specifically
@use '@mskcc/components/carbon-11';
// or import inidividual component styling
@use '@mskcc/components/carbon-11/components/button';You can use the cdn version by injecting it directly into the html. Add this to the <head> of your html.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mskcc/components@latest/dist/carbon-11.min.css"
/>pnpm run gen:componentThe script will create a new component folder in carbon-11 directory and keep the carbon-11 index file up-to-date.
| components (carbon 11) | type | stylesheet |
|---|---|---|
@mskcc/carbon-react |
scss |
@use '@mskcc/components/carbon-11' |
css |
@import '@mskcc/components/dist/carbon-11.min.css' |
|
| Component directory | scss |
carbon-11/components/' |
css |
dist/components/' |
|
| Theme | scss |
@use '@mskcc/components/theme' |
css |
@import '@mskcc/components/dist/theme.css' |
| For legacy components (carbon 10) | type | stylesheet |
|---|---|---|
| Legacy stylesheet | scss |
@use '@mskcc/src/styles-all' |
css |
@import '@mskcc/dist/legacy.min.css' |
|
| Legacy Component directory | scss |
src/' |
css |
dist/legacy-components/' |