Стек:
- gulp v5
- gulp-sass v6 и т.д.
При компиляции scss в результате .map имеет непонятные пути sources, как исправить мой конфиг gulp?
Я пытаюсь делать компиляцию с разных папок и пользоваться партиалами в компонентах битрикс.
Думаю причина в параметре loadPaths
(inclidePaths в версии ниже). Он партиалы позволяет подключать с миксинами.
Я ставлю в таске bx-sass
.pipe(sass()) и не пойму как исправить.
gulpfile js:
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import gulp from 'gulp';
import gulpAutoPref from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import rename from 'gulp-rename';
// в работу берем только обнавленные файлы
import changedInPlace from "gulp-changed-in-place";
// const changedInPlace = require("gulp-changed-in-place");
// Путь к основной index.scss
const mainPath = 'css/**/*.scss'
// Путь к основной папке с партиалами
const scssPartials = 'css/scss/';
// Путь к папке, где нужно компилировать файлы
const templatesPath = 'bitrix/templates/default/**/*.scss';
gulp.task('sass', function () {
return gulp.src(mainPath) // Найдем все .scss файлы
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
}).on('error', sass.logError))
.pipe(gulpAutoPref([
"last 15 versions",
"not dead",
]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(file => file.base)) // Сохраняем css рядом с scss
});
gulp.task('bx-sass', function () {
return gulp.src(templatesPath) // Найдем все .scss файлы
.pipe(sourcemaps.init())
.pipe(sass({
loadPaths: [scssPartials], // Указываем дополнительные пути для поиска
style: 'expanded',
}).on('error', sass.logError))
.pipe(gulpAutoPref([
"last 15 versions",
"not dead",
]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(file => file.base)) // Сохраняем css рядом с scss
});
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"sass-dev": "gulp dev",
"sass-bitrix": "gulp bitrix-dev",
"watch": "gulp watch",
"watch-bx": "gulp watch-bx",
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^5.0.0",
"gulp-autoprefixer": "^9.0.0",
"gulp-changed": "^5.0.2",
"gulp-changed-in-place": "^2.3.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^6.0.0",
"gulp-sourcemaps": "^3.0.0",
"sass": "^1.83.0"
},
}
Пример scss в шаблоне компонента:
@use 'bundle' as *;
.main-slider-block {
//code
}
Плохой .map. Заметно, что путь до scss в компоненте стоит в каждый sources:
{
"version": 3,
"sources": [
"components/bitrix/news.list/main-slider/data:;charset=utf-8....большая дата",
"components/bitrix/news.list/main-slider/style.css",
"components/bitrix/news.list/main-slider/file:/home/talant/www/project.ru/site/css/scss/_vars.scss"
],
"names": [],
}
Хороший .map снаружи в css/scss:
{
"version": 3,
"sources": [
"index.css",
"data:;charset=utf-8,/*!%...",
"file:/home/talant/www/project.ru/site/css/scss/_reset.scss",
"file:/home/talant/www/project.ru/site/css/scss/header/_index.scss",
]
}