Конфигурация Webpack для нескольких файлов scss

Я сотрудничаю с проектом в github, и моя работа заключается в создании стилей для различных визуальных тем. Проект состоит из файлов scss, и для проверки того, что я делаю, мне нужно скомпилировать их. Я не хочу устанавливать ruby-sass, и у меня уже установлено webpack, я также установил node-sass и sass-loader, но я не знаю, как его настроить.

Как вы можете видеть на картинке, у меня есть четыре основных файла sass, три из которых я должен скомпилировать отдельно.

introducir la descripción de la imagen aquí

Проблема в том, что я не знаю, как настроить webpack, чтобы вы могли без проблем скомпилировать каждый из этих файлов и найти его правильно базовые файлы scss, находящиеся вне папки, в которую должны быть скомпилированы файлы.

introducir la descripción de la imagen aquí

Кроме того, я планирую создать четыре других стиля, структура которых одинакова, те же файлы, поэтому конфигурация будет очень полезной Вообще, чтобы иметь возможность использовать его в каждом проекте.

0
задан 14.03.2016, 08:59
1 ответ

Чтобы отвечать на тот же случай использования, но используя gulp я произвел следующий код:

'use strict';

import merge    from 'merge-stream';
import gulp     from 'gulp';

import yaml     from 'js-yaml';
import fs       from 'fs';
import path     from 'path';

// Themes path
const themesPath = "jet/static/jet_src/scss/themes/";

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function (file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

function sass() {
    var folders = getFolders(themesPath);
    return merge.apply(null, folders.map(folder => {
        return gulp.src(path.join(themesPath, folder, '/**/*.scss'))
            .pipe($.sourcemaps.init())
            .pipe($.sass({
                includePaths: PATHS.sass
            })
                .on('error', $.sass.logError))
            .pipe($.autoprefixer({
                browsers: COMPATIBILITY
            }))
            // Comment in the pipe below to run UnCSS in production
            .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
            .pipe($.if(PRODUCTION, $.cssnano()))
            .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
            .pipe(gulp.dest(PATHS.dist + '/css/themes/' + folder))
            .pipe(browser.reload({stream: true}));
    }));
}

Тогда, поскольку возможно замечать в действительности функцию, она не осложнена, состоит в выполнении того же задания на дереве каталогов присутствующем в проекте:

  • Мы определяем постоянную переменную, стоимость которой - цепь символов, которая содержит дорожку к папке, где - подпапки для каждой темы.
  • Давайте верить в функцию, которая возвращает в договоренности список подпапок папки themes.
  • Приходит самая сложная часть: обычно проекты расположены в порядке так что все файлы sass или scss они находятся в той же папке и конечный результат - смесь всех этих файлов в единственном файле или в нескольких файлах, но всегда продолжая ту же структуру папки источника.

    Однако, эта структура показывает нам, что будет работать предыдущее задание, но с несколькими папками вместо одной, а следовательно мы должны приходить к заключению, если, или если, у нас иначе будут проблемы в выполнении заданий, что мы должны создавать трэд заданий, который это подразумевает? Когда у нас есть единственное задание gulp, закрой задание, после которого он завершается, когда у нас есть многообразные задания, должны закрывать их все до того, как gulp он смог завершать это задание.

    Следовательно мы нуждаемся в том, чтобы перемешать все задания на канале (pipe), и для этого мы используем merge-stream перед тем, как выполнять субзадания.

  • Итак, мы будем выполнять каждое субзадание на протяжении каждого дерева разработки: мы призываем дерево к вырыванию, которое мы делаем с каталога отец к конечным файлам. Для этого мы используем функцию map.

  • В конце концов, это очень важно также, быть осторожен, которого задание ответило дерево папок таким же образом как он учрежден в первоначальном дереве, так что каждый файл предназначен для подпапки, соответствующей каждой теме. Поэтому в конце концов, внутри функции dest мы добавляем переменную folder, что содержит имя подпапки, для того, чтобы он смог предназначать вытекающие файлы в Вашей соответствующей папке.

Это все. Результат говорит сам: introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

0
ответ дан 24.11.2019, 14:57