<!-- TITLE: Importing CSS, SCSS, and SVG files into a Phovea App --> # SCSS file [SASS/SCSS](http://sass-lang.com/) 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 ```html <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: ```sass @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: ```ts 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: 📕 the `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. ```ts // allow override webpack config on import declare module "!*"; ``` Then, navigate to the `*.ts` file that needs the svg, and import it with: ```ts 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: ```ts document.body.innerHTML = String(icon); ```