Задать вопрос
UNN4MED
@UNN4MED
Битрикс разработчик

Сборка gulp строит плохой source путь в * .map от sass. Как исправить?

Стек:
  • 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",
 ]
}
  • Вопрос задан
  • 11 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы