How to force my CSS styles than ember-cli-materialize ones?

Hi Everyone, I hope you are fine.

I installed ember-cli-materialize. It works fine. Then I tried to make a custom css (main.css) in vendor directory then I imported it in ember-cli-build.js

app.import('vendor/main.css');

But when my CSS didn’t applied. I opened dist/assets/vendor.css, and I found my CSS styles, but it didn’t applied in the browser. So what’s the point?

All my styles has been added already to vendor.css, but the problem is materialize styles is always overriding my styles. I found my styles through using chrome dev console, but It is overridden. I want to override some materialize styles.

I put my styles inside app/styles/app.scss and it worked.

I Iearn now that my of my styles should be put under app/styles, and everything related to mentor styles should be put under vendor, and included in ember-cli-build.js

Why app.scss works than app.css, I think after installing ember-cli-materialize, ember has been configured to use app.scss than app.css.