Gulp + scss + alias, как настроить webstorm чтобы понимал alias?

Чтобы настроить WebStorm для работы с псевдонимами (alias) в Gulp.js с использованием SCSS, вам потребуется выполнить следующие шаги:

1. Убедитесь, что вы установили Gulp.js и все необходимые пакеты для работы со SCSS. Если нет, установите их с помощью менеджера пакетов npm.

2. Создайте файл gulpfile.js в корневой папке вашего проекта и откройте его в WebStorm.

3. В вашем gulpfile.js определите задачу для компиляции SCSS в CSS с использованием плагина gulp-sass. В примере мы будем использовать следующий код:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('scss', function () {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('scss'));

4. Теперь создайте файл tsconfig.json в корневой папке вашего проекта и откройте его в WebStorm.

5. В вашем tsconfig.json добавьте секцию paths, которая определяет псевдонимы для путей к файлам. В примере мы будем использовать следующий код:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./built",
    "paths": {
      "@scss/*": ["src/scss/*"]
    }
  }
}

6. Теперь обновите настройки компилятора TypeScript в WebStorm:

• Откройте настройки (File -> Settings).
• Выберите Languages & Frameworks -> TypeScript.
• Установите флажок Enable (если не установлен).
• Укажите путь к файлу tsconfig.json в разделе Use tsconfig.json.
• Нажмите Apply и OK.

7. Теперь WebStorm будет понимать псевдонимы, определенные в вашем tsconfig.json. Вы можете использовать их при импорте файлов SCSS в TypeScript:

import '@scss/main.scss';

WebStorm будет автоматически находить и компилировать файлы SCSS, используя вашу задачу Gulp.js.

В результате, при запуске задачи gulp из WebStorm, SCSS-файлы будут скомпилированы в CSS и размещены в папке dist/css.