Ionic Stencil: Extending default components

问题

I need to make certain changes in the behavior of some of the ionic components.

It was easy enough with Ionic 3 and angular components, but now that we're migrating to Ionic 4, I'm finding it more challenging to alter the default web components in @ionic/core.

I have created a new stencil components project and added the npm package for @ionic/core. I tired extending the datetime component and found that the web components cannot have super classes.

So I copied over the entire folder for the datetime component from the Ionic source to my project and changed only the folder name and the class name. So it's MyDatetime class in my-datetime folder.

Trying npm run build on the project, it fails with a whole bunch of sass errors.

Here's how they look like:

[ ERROR ]  sass error: src/components/my-datetime/datetime.ios.scss:1:9
           Can't find stylesheet to import.

      L1:  @import "./datetime";


[ ERROR ]  sass error: node_modules/@ionic/core/dist/collection/components/tab-bar/tab-bar.ios.scss:207:14
           expected selector.


[ ERROR ]  sass error: node_modules/@ionic/core/dist/collection/components/item/item.ios.scss:207:14
           expected selector.

    L207:  // .label-ios + ion-textarea .native-textarea,
    L208:  // .label-ios + .input + .cloned-input {

The imported sass file that it says it cannot find (./datetime) is of course existing in the same folder.

Could someone please hint on what I'm doing wrong here.

来源：https://stackoverflow.com/questions/56633505/ionic-stencil-extending-default-components

标签

ionic-framework

ionic4

stenciljs

stencil-component