Yogesh Chauhan's Blog

How SCSS (Sass) finds a module without a file extension?

in SCSS on May 20, 2021

In SassScript, loading another stylesheet or modules is very similar to CSS. We can do that via @import or @use rules.

So far using SassScript, we have trashed many boring CSS code writing techniques. Why not take it to one step forward?

This time it’s about how we load files in SCSS (Sass). It gets redundant to write down the file extensions every time we want to import a stylesheet/module. Sass has a solution to this problem.

You don’t need to write out an absolute URL for each stylesheet/module you load in Sass.

Sass’s module finding algorithm is very smart when it comes to finding a module, which makes a developer’s job way easier and a bit less time consuming if you are developing a library.

For e.g. if you just write out this code in SCSS (Sass):

@use "fonts"

Then your SassScript will search for fonts.scss, fonts.sass, or fonts.css and load whichever one is present.

SassScript loads a stylesheet by URL and not by the file path so forward slashes will work on every operating systems!

Load Paths

Sass allows users to change the load paths.

In SassScript “Load Paths” is the path on the filesystem that SassScript will look for, to locate the modules.

For example if you set the load path like this:


Sass will use the relative path by default to load the modules but no relative path exists then Sass will use load paths.

and if you want to add file named “fonts” from that folder then all you need to do is just add this code:

@use "fonts"

That will load “modules/abc/sass/fonts.scss” file into the stylesheet.

SassScript doesn’t require you to use “./” for relative paths, instead the relative paths are always available.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
File System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousAn Introduction to wp-config file in WordPressWordPressHow to Install PHP composer in Mac OS Catalina?PHPUnderstand Inheritance in PHP in this Basic Example (For Beginners)PHPHow to create a link tag button using CSS?CSS3 Types of Arrays in PHPPHP