How to set @import correctly?

Question

css

In general, I master SASS / SCSS and faced such a problem. There is a common css file. We will import the rest to it. In theory, variables should be visible in all files. BUT! No. I understand that this is due to the fact that in the main.scss file (which is presented in the code) the imports are specified with the .css extension. But if you do not set or set .scss at all, everything just falls off.

//vars

$white: #f6f6f6;
$blue: #33c1e3;

//layout
@import url('_misc/normalize.css');
@import url('_misc/layout.css');

//styles
@import url('sections/header.css');

Answer 1

The documentation says how to do it right @import:
sass-lang.com/documentation/file.SASS_REFERENCE.ht...
In short, you need to import .sass files in main.sass, since now they are imported as a CSS rule @importand therefore everything falls off.