robinck / gulp-style-aliases

Gulp plugin that lets you create custom aliases for CSS,less and SASS properties with an @alias rule 🇺🇦

gulp-style-aliases

Gulp plugin that lets you create custom aliases for CSS,less and SASS properties with an @alias rule. Supports @import '...' and url('...').

Install

$ npm install --save-dev gulp-style-aliases

Usage

const gulp = require('gulp');
const aliases = require('gulp-style-aliases');

var webPath = '.', outputPath = 'dest';

gulp.task('default', () =>
	gulp.src('src/*.{css|less|scss}')
		.pipe(aliases({
		    "@aliasName": "path/to/your/folder"
		}))
		.pipe(gulp.dest(outputPath))
);

A javascript file before compilation

@import "@aliasName/css/user.less";

body {
  background: #9e9e9e;
}

will become:

@import "path/to/your/folder/css/user.less";

body {
  background: #9e9e9e;
}

gulp-style-aliases's Issues

Import an import from another file

Hi,

Im trying to import an import from another file, but it returns that the path is undefined.

Example:

/test/sources/sass/main.scss
@import 'anotherTest/main';

/test2/sources/sass/main.scss
@import 'test/main';

But when i try to compile test2 sass file, it returns that @import 'anotherTest/main'; is undefined even if i add the two aliases.

There's any way to solve this?

Thanks!

gulp-style-aliases not working in deep import directory in gulp

gulp.js

  .pipe(aliases({
        "approot": "src/static",
        "subroot": "bikedekhosrc/static"
    }))

dev.scss

@import "subroot/scss/components/headerfooter_Desktop"; // this is working fine

subroot/scss/components/headerfooter_Desktop

below code in this file

   @import "approot/components/headerfooter_Desktop"; // this code is not working  

   @import "src/static/components/headerfooter_Desktop"; // this code is working fine

    .header {
            background: red;
     }

The problem with @font-face

Hi.
I have a problem. The alias from the second url in font-face doesn't work. Like this:
// input

@font-face {
font-family:'Zawgyi-One';
src: local('Zawgyi-One'),
url('@aliasName/fonts/zawgyi.woff') format('woff'),
url('@aliasName/fonts/zawgyi.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}

// output

@font-face {
font-family: 'Zawgyi-One';
src: local("Zawgyi-One"),
url("../fonts/zawgyi.woff") format("woff"),
url("@aliasName/fonts/zawgyi.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}

What can be wrong?

Working well but ideas to intellisense with VSCode?

Is working very well, do you have any idea to don't lose SCSS intellisense in VSCode using this plugin?