How to import regular CSS file in SCSS file ?

Last Updated : 26 Sep, 2024

Importing a regular CSS file into a SCSS file allows you to use standard CSS styles within your SCSS file. This is done by using the @import directive, enabling the CSS file to be included and compiled along with SCSS styles during preprocessing.

@import keyword:

The @import keyword in SCSS allows you to combine multiple SCSS and CSS files into one, making the code more manageable. It helps organize large projects by separating styles into smaller files, which can be imported when needed.

Syntax:

@import url "/path/of/the/file";

Approach:

First, create an HTML file without CSS property.
In the next step, create a file with the .scss extension.
In the last step, you need to import the CSS file into the SCSS file using the keyword import.

The process for importing the regular CSS file into the SCSS file:

You can create any number of CSS and SCSS files and you can use them using the keyword 'import'. For example, create one CSS file and import that file into the SCSS file then you can able to use that property in your project.

Example1: In the below code, we will create an HTML file and then with the help of the import keyword we will add some CSS properties to the HTML file.

So, first, we create the GfG.html file

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" href="style.css">

    <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>

</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h3>
            A computer science portal for geeks.
        </h3>
    </center>
</body>

</html>

After creating the GfG.html file, we create One partial named GfG.css

body{
    border: 5px solid black;
    margin: 60px;
  }

Let us create one more CSS file named two.css

h3{
   color:red;
}

In the next step, we can import GfG.css in style.scss file and write CSS to style our document. As we have imported the GfG.css and two.css file we can now use them in our style.scss file.

//style.scss
@import 'GFG.css';
@import 'two.css';

Final style.css file:

@import url(GFG.css);
@import url(two.css);

Output:

Example2: In the below code we will create an HTML file and then with the help of the import keyword, we will add some CSS properties to the HTML file.

So, first, we create the GfG.html file

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
</body>

</html>

After creating the GfG.html file, we create One partial named one.scss

$green:green;
$black:black;
$red:red;

In the next step, we can import one.scss in style.scss file and write CSS to style our document. As we have imported the one.css file we can now use them in our style.scss file.

@import 'one';
h1{
   background-color:$red;
}