What Is the Meaning of the "@Include" in .CSS Files

CSS usage of @include in this example? Can I replace them with @import?

There is no @include in CSS.

@include is used by SASS ( to include mixins )

By the way SASS is an extension of CSS which makes CSS styling much easier.

SASS files can end with .sass or .scss

https://sass-lang.com/guide

What is the meaning of the @include in .css Files?

@includes are a part of SCSS, it's called Mixin. Here is an example:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
}

.box { @include border-radius(10px); }

@includes are a shortcut to storing especially things like vendor prefixes. The CSS output of the above will be:

.box {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
            border-radius: 10px;
}

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

How to include css files in Vue 2

You can import the css file on App.vue, inside the style tag.

<style>
  @import './assets/styles/yourstyles.css';
</style>

Also, make sure you have the right loaders installed, if you need any.

CSS @import and the order of it

That is not possible:

From http://www.w3.org/TR/CSS21/cascade.html#at-import:

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present).

From http://www.w3.org/TR/CSS21/syndata.html#at-rules:

Assume, for example, that a CSS 2.1 parser encounters this style
sheet:
@import "subs.css";
h1 { color: blue }
@import "list.css";
The second '@import' is illegal according to CSS 2.1. The CSS 2.1
parser ignores the whole at-rule, effectively reducing the style sheet
to:
@import "subs.css";
h1 { color: blue }

There is no need to define the rules between the @imports though. If you want to override properties in file 1, they can also be added after the @import blocks. Properties which are overridden in file 2 can be omitted.

What does @import do?

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). See the section on parsing for when user agents must ignore @import rules. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

From Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Why specify @charset UTF-8; in your CSS file?

It tells the browser to read the css file as UTF-8. This is handy if your CSS contains unicode characters and not only ASCII.

Using it in the meta tag is fine, but only for pages that include that meta tag.

Read about the rules for character set resolution of CSS files at the w3c spec for CSS 2.

How to @import CSS file in Angular?

If you want to point to a css/scss file within a component, you can add a shortcut to your styles folder in your angular.json in the options node like so :

        "my-app": {
            "root": "...",
            "sourceRoot": "...src",
            "projectType": "application",
            "architect": {

                "build": {
                    [...]
                    "options": {
                        [...]
                        "stylePreprocessorOptions": {
                          "includePaths": [
                            "projects/my-app/src/styles" // path to your styles folder
                          ]
                        }
                    }
                    
                },

            }
        },

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";

overriding css styles with @import not working

That isn't working because any import rule declared inside of a stylesheet must come before everything else - otherwise, ...well, it doesn't work ;) .

So, what you should have in your style.css stylesheet is:

@import url('style-override.css');  
body {color: red;}