Angular (13) 材质 - 覆盖 CSS 文件不起作用

Question

I have a simple Angular (13) application with Material. I've created a CSS file that is meant for overriding some of the Material styles, and imported it into styles.scss. This import is the last line of this file. Yet, none of the CSS definitions in the external file seem to actually override the existing styles from Material. When I place these definitions directly in styles.scss, they work. What is the difference between importing CSS definitions from a file and placing them directly, in this case? Am I missing something here?

Answer 1

To import css to an scss file, you should import it without the extension like this.

@import "path/to/file/file_name_without_extension"

---

If you import that with extension

@import "path/to/file/file_name.css"

it won't work as it gets translated to

@import url(path/to/file/file_name.css);

Merged PR from SASS repo: Implement raw css imports