Using Import Syntax With Ionic Core

Ionic Framework
1

I want to use a single UI component of the Ionic framework in my web application. According to the docs, adding the following would work:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

And it worked as expected.

But I wanted to use the import syntax with node modules instead of including the script tags in the html document. So, I did npm i @ionic/core and then added the following to the top of my TypeScript class file where I will be using the ui component:

import '@ionic/core';
import '@ionic/core/css/ionic.bundle.css';

But this made the whole page blank. When I investigated the issue, I found out that it was due to the following part of the css:

html:not(.hydrated) body {
    display: none; 
}

I have two questions regarding this:

  1. What is the right way to use the import syntax with Ionic so that I will not encounter such problems?

  2. As I was looking into the problem, I noticed that ionic.bundle.css includes a lot of global styling applied to html, body, etc. elements. But since I am not building an Ionic app and rather just using a single component of the framework, what should I do to scope the styles to only the component I will be using so that any other side-effect will be avoided.

2

That approach of using import is more of a Sass syntax than the valid css.

Really the best approach depends on what other tools you are using. What framework are you using? What build system?

3

I am not using a particular framework such as Angular or React. The build system is WebPack.