sass-alias's Introduction

sass-alias

sass-alias is a node-sass and dart-sass importer that brings aliasing to sass.

Installation

This package can be installed from npm or yarn by running one of the following commands.

Install using npm:

npm install sass-alias

Install using yarn:

yarn add sass-alias

Introduction

sass-alias brings sass the capability to import files using aliasing, this make importing more easy.

Example

Let's imagine we have the following project structure:

project
├───components
│	└───button
│		├───button.module.scss
│		└───button.component.js
│
└───resources
	└───scss
		├───colors.scss
		└───utils.scss

If we want to import colors into button.module.scss the resulting path should look like this

@import '../../resources/scss/colors.scss';

/* more scss stuff... */

If we use sass-alias the resulting path could look like this

@import '@scss/colors.scss';

/* more scss stuff... */

Configuration

using sass node-sass or dart-sass

import path from 'path';
import sass from 'sass';

import { create } from 'sass-alias';

sass.renderSync({
	importer: create({
		'@scss': path.join(__dirname, 'scss'),
	}),
});

using sass-loader in webpack

// webpack.config.js

const { create } = require('sass-alias');

module.exports = {
	module: {
		rules: [
			{
				test: /^.*\.(sass|scss)$/,
				use: [
					{
						loader: 'sass-loader',
						options: {
							sassOptions: {
								importer: create({
									'@scss': path.join(__dirname, 'scss'),
								}),
							},
						},
					},
				],
			},
		],
	},
};