Importing CSS, SCSS, and SVG files into a Phovea App
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.
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
.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
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.scss, you need to specify the extension you want to import.
On a similar note, you may see
.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:
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:
raw-loader is already added as an exception and the leading
! is not needed. Thus the changes in the tsd.d.ts are not needed.
// 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);