How to Include One CSS File in Another?

Here are the methods to include one CSS file in another:

Method 1. Using @import Rule

The @import rule allows you to import one CSS file into another, enabling modularity and reusability of styles.

styles.css

additional-styles.css

• The @import rule in styles.css includes additional-styles.css, ensuring that all styles from the additional file are applied.
• This approach keeps styles modular and reusable across multiple files.

Method 2. Using Preprocessors like SCSS

If you’re using SCSS (Sass), you can use the @import directive to include one file in another.

main.scss

_variables.scss

_typography.scss

• SCSS files use the @import directive to include partials (like _variables.scss and _typography.scss).
• After compiling SCSS, a single main.css file is generated for use in the HTML.