Importing the mdc components by another component

[mtsgeneroso]

Hi, for some reason when I import the components my SASS files are ignored.

I'm trying to import ember-cli-mdc-[component] inside my own component (just for styling), but I always find this files problem.

You know something about that or how can I fix?

[hilljh82]

I am closing this issue since no description was provided. If this is closed by mistaken, please describe the issue so we can address it.

[mtsgeneroso]

I am closing this issue since no description was provided. If this is closed by mistaken, please describe the issue so we can address it.

Sorry about that, was a misclick

[hilljh82]

@mtsgeneroso Can you provide a simple code example so I can help you with a solution?

[hilljh82]

@mtsgeneroso Based on the subject of the issue, I think this may answer your question:

import Component from 'ember-cli-mdc-[package]/components/[component].

For example, to import the dialog component to extend, you would do the following:

import MdcDialogComponent from 'ember-cli-mdc-button/components/mdc-dialog';

export default class MyCustomDialog extends MdcDialog {

}

I hope this answers you question. If not, please clarify any misunderstandings.

[hilljh82]

BTW, there may be another way to solve your design problem that does not require extending the component. I would recommend extending the component if you are modifying the behavior of the component. If you are just stying the component, they may be some other way. Just a thought.

[mtsgeneroso]

Thank you for your help!

@mtsgeneroso Can you provide a simple code example so I can help you with a solution?

I basically installed the component using ember install ... (I tried to fix importing directly through addon/index.js, but nothing relevant)

BTW, there may be another way to solve your design problem that does not require extending the component. I would recommend extending the component if you are modifying the behavior of the component. If you are just stying the component, they may be some other way. Just a thought.

In the future, I will need to extend the component behaviour, but now it's just style.

Have some thing that I could do to custom that extended component without ignoring the SASS of my addon?

[hilljh82]

@mtsgeneroso Did the suggestion above solve your problem? Is it ok for me to close this issue, or does the issue still remain?

[mtsgeneroso]

I did:

All the styles files have is only body { color: red } (just testing the style). That style does not appear on the final build files.

[hilljh82]

@mtsgeneroso It seems like you are making add-on? If so, you need move ember-cli-mdc-sass to the dependencies section of your package.json. This is required when you are creating an add-on and it contains an add-on that takes part in the complication phase, such is the case with ember-cli-mdc-sass.

[mtsgeneroso]

Hi, sorry for the delay.

I created again a fresh addon using your instructions (adding mdc-sass on package.json). But, didn't work. Have you some example of this situation, addon (ember-cli-mdc) inside an addon (wrapper for styling)?

[hilljh82]

@mtsgeneroso yes, ember-cli-gatekeeper. Do you mind pushing the fresh add-on to a git repo, and letting me help diagnose the problem?

[mtsgeneroso]

It's worked! I followed the add-on structure for styles and your instructions above.

My mistake was adding the stylesheet on the wrong folder (I'm a newbie with emberjs).

I started the project on bitbucket. I can give you permission in the repo, just send me your email of there.

[hilljh82]

Great, I am going to close this issue now.