Importing .css .scss and SVG files into a Phovea App

SCSS file

SASS/SCSS is a language on top of CSS for styling HTML. Similar to TypeScript, every valid CSS clause is a valid SCSS clause. In addition, several features are added that simplifies the creation.

.css/.scss files

Webpack goes through all the dependencies in package.json and bundles and compiles the matching files together to create a style.css file. This file is then imported in index.html with the link tag

<link href="./style.css" rel="stylesheet" type="text/css">

*Note that this file is only generated with the build, as is not available in your src folder (since it is generated by Webpack).

In order to include any custom .css/.scss, the recommended approach is to import all custom (project specific) CSS and SCSS files in the correct order within the styles.scss file (which lives in /src).

The syntax for importing within a .scss file is:

@import "styles/mySCSS file";

A note on the filename/extension. You don't need to include the extension if there is only one file with that name in the directory. However, if you have a myStyles.css and myStyles.scss, you need to specify the extension you want to import.

On a similar note, you may see .css/.scss files that have an underscore at the beginning, you don't need to include the underscore in your import statement.

Once you have all your imports set within the styles.scss file, you can import it within index.ts with:

import './style.scss';

SVG Files

In order to import SVG files, you must first modify the tsd.d.ts file to allow an override on the webpack config for these imports:

// allow override webpack config on import
declare module "!*";

Then, navigate to the *.ts file that needs the svg, and import it with:

import icon from '!raw-loader!./icon-database.svg';

In order to include the svg in your html, use String(icon) as in the example below:

document.body.innerHTML = String(icon);