Index files for folder imports in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this Sass import resolution?

Given a folder styles/ containing _index.scss and _buttons.scss, what file(s) will be imported by @use 'styles';?

SASS

@use 'styles';

A Both _index.scss and _buttons.scss are imported

B No files are imported, error occurs

C Only _buttons.scss is imported

D Only _index.scss is imported

💡 Hint

Think about how Sass resolves folder imports with index files.

When importing a folder, Sass looks for an _index.scss file inside it and imports only that file. Other files are not imported unless explicitly referenced.

🧠 Conceptual

intermediate

Why use an index file for folder imports in Sass?

What is the main benefit of having an _index.scss file inside a folder for Sass imports?

A It allows importing multiple files with a single import statement

B It prevents any files in the folder from being imported

C It automatically compiles all Sass files in the folder separately

D It disables Sass linting for the folder

💡 Hint

Consider how you can simplify import statements.

An index file acts as a central place to import and re-export multiple Sass partials, so you can import the whole folder with one statement.

📝 Syntax

advanced

Which option correctly imports all Sass partials in a folder using an index file?

Given a folder components/ with _index.scss, _header.scss, and _footer.scss, which _index.scss content correctly imports all partials?

A

@use './header';
@use './footer';

B

@import 'header';
@import 'footer';

C

@use 'components/header';
@use 'components/footer';

D

@use 'header';
@use 'footer';

💡 Hint

Remember relative paths inside index files and modern Sass import syntax.

Inside _index.scss, you must use relative paths with @use to import sibling partials correctly.

❓ optimization

advanced

How does using an index file improve Sass build performance?

What is a key reason that using an _index.scss file for folder imports can optimize Sass compilation?

A It disables source maps for faster builds

B It compiles each partial into a separate CSS file automatically

C It reduces the number of import statements and dependency checks

D It caches all partials in memory permanently

💡 Hint

Think about how Sass processes imports and dependencies.

Using an index file consolidates imports, reducing the number of import statements Sass must resolve, which can speed up compilation.

🔧 Debug

expert

Why does this Sass import fail when using an index file?

Given this folder structure:

components/
  _index.scss
  _button.scss
  _card.scss

And _index.scss content:

@use 'button';
@use 'card';

Why does @use 'components'; in main.scss cause an error?

A Because Sass does not support @use inside index files

B Because @use inside _index.scss needs relative paths like './button' and './card'

C Because _index.scss must be named _components.scss to work

D Because @use cannot import partials starting with underscore

💡 Hint

Check how paths are resolved inside index files.

Inside an index file, you must use relative paths (e.g., @use './button';) to import sibling partials. Omitting './' causes Sass to look in the wrong place.