Video Cant find stylesheet to import

Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import. Also, in the indented syntax, imported URLs aren’t required to have quotes.

When Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import. Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written. What’s more, any mixins, functions, or variables that were defined before the @import (including from other @imports) are available in the imported stylesheet.

Table of Contents

Finding the File permalinkFinding the File

It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; @import “variables” will automatically load variables.scss, variables.sass, or variables.css.

Load Paths permalinkLoad Paths

All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use @import “susy” to load node_modules/susy/sass/susy.scss.

Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.

Partials permalinkPartials

As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

Index Files permalinkIndex Files

If you write an _index.scss or _index.sass in a folder, when the folder itself is imported that file will be loaded in its place.

Custom Importers permalinkCustom Importers

All Sass implementations provide a way to define custom importers, which control how @imports locate stylesheets:

Node Sass and Dart Sass on npm provide an importer option as part of their JS API.
Dart Sass on pub provides an abstract Importer class that can be extended by a custom importer.
Ruby Sass provides an abstract Importers::Base class that can be extended by a custom importer.

Nesting permalinkNesting

Imports are usually written at the top level of a stylesheet, but they don’t have to be. They can nested within style rules or plain CSS at-rules as well. The imported CSS is nested in that context, which makes nested imports useful for scoping a chunk of CSS to a particular element or media query. Note that top-level mixins, functions, and variables defined in the nested import are still defined globally, though.

Importing CSS permalinkImporting CSS

In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

CSS files imported by Sass don’t allow any special Sass features. In order to make sure authors don’t accidentally write Sass in their CSS, all Sass features that aren’t also valid CSS will produce errors. Otherwise, the CSS will be rendered as-is. It can even be extended!

Plain CSS @imports permalinkPlain CSS @imports

Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.

Interpolation permalinkInterpolation

Although Sass imports can’t use interpolation (to make sure it’s always possible to tell where mixins, functions, and variables come from), plain CSS imports can. This makes it possible to dynamically generate imports, for example based on mixin parameters.

Import and Modules permalinkImport and Modules

Sass’s module system integrates seamlessly with @import, whether you’re importing a file that contains @use rules or loading a file that contains imports as a module. We want to make the transition from @import to @use as smooth as possible.

Importing a Module-System File permalinkImporting a Module-System File

Import-Only Files permalinkImport-Only Files

An API that makes sense for @use might not make sense for @import. For example, @use adds a namespace to all members by default so you can safely use short names, but @import doesn’t so you might need something longer. If you’re a library author, you may be concerned that if you update your library to use the new module system, your existing @import-based users will break.

To make this easier, Sass also supports import-only files. If you name a file <name>.import.scss, it will only be loaded for imports, not for @uses. This way, you can retain compatibility for @import users while still providing a nice API for users of the new module system.

Configuring Modules Through Imports permalinkConfiguring Modules Through Imports

You can configure modules that are loaded through an @import by defining global variables prior the @import that first loads that module.

Loading a Module That Contains Imports permalinkLoading a Module That Contains Imports

When you use @use (or @forward) load a module that uses @import, that module will contain all the public members defined by the stylesheet you load and everything that stylesheet transitively imports. In other words, everything that’s imported is treated as though it were written in one big stylesheet.

This makes it easy to convert start using @use in a stylesheet even before all the libraries you depend on have converted to the new module system. Be aware, though, that if they do convert their APIs may well change!