Как создать css-модули из scss файлов (пакет для Gulp)?

Для создания CSS-модулей из SCSS файлов в Gulp можно использовать пакет gulp-sass и пакет gulp-css-modules.

1. Установите пакеты gulp-sass и gulp-css-modules с помощью следующей команды:

   npm install gulp-sass gulp-css-modules --save-dev

2. Создайте новый файл gulpfile.js в корневой директории вашего проекта и импортируйте необходимые пакеты:

   const gulp = require('gulp');
   const sass = require('gulp-sass');
   const modules = require('gulp-css-modules');

3. Создайте задачу Gulp для компиляции SCSS файлов и создания CSS-модулей:

   gulp.task('sass', function() {
     return gulp.src('src/scss/*.scss') // путь к вашим исходным SCSS файлам
       .pipe(sass().on('error', sass.logError))
       .pipe(modules()) // преобразование в CSS-модули
       .pipe(gulp.dest('dist/css')); // путь для сохранения результатов
   });

В этой задаче мы указываем папку с исходными файлами SCSS (здесь это src/scss/*.scss), компилируем их с помощью пакета gulp-sass, затем преобразовываем компилированный CSS в CSS-модули с помощью пакета gulp-css-modules и сохраняем результаты в папке dist/css.

4. Добавьте задачу Gulp по умолчанию, которая будет выполнять задачу sass:

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

5. Запустите Gulp в командной строке:

   gulp

При этом Gulp выполнит задачу sass и создаст CSS-модули из ваших SCSS файлов.

В результате у вас будет создан новый файл с расширением .m.css для каждого исходного SCSS файла, который содержит CSS-модули для использования в вашем проекте. Эти файлы будут сохранены в папке dist/css или в другой указанной вами папке.

Обратите внимание, что для использования CSS-модулей в ваших HTML или JavaScript файлах вы должны будете ссылаться на соответствующий .m.css файл, а не на исходный SCSS файл. Таким образом, вы сможете получить доступ к экспортированным классам CSS-модулей в своем коде.