Скомпилируйте все файлы SASS в папке в один CSS файл - PullRequest
Новая
       76

Скомпилируйте все файлы SASS в папке в один CSS файл

0 голосов
/ 27 марта 2020

У меня есть подпапка, которая содержит файлы sass. Я хочу скомпилировать эти файлы в один css файл с именем client-styles.css, который будет храниться в той же папке.

У меня есть настройка gulpfile, которая просматривает папку modules, находит подпапки и файлы sass в них и компилирует эти файлы sass в css (сохраняя их в той же папке).

Папка, которую я должен был скомпилировать, называется client-styles. Вот моя структура папок: 

theme
   - assets
      - src
         - sass
           - client-styles
              - _buttons.scss
              - _typography.scss
              - _core.scss
           - config
              - _mixins.scss
              - _grid.scss
              - _variables.scss
         - styles.scss
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (this file is created when running gulp)
   gulpfile.js

Gulp правильно компилирует файл моих модулей css, но при моей текущей установке ничего не компилируется для моего client-styles.css

Вот мой текущий gulpfile.js

'use strict';

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

var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}

function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}

exports.scss = scss

var themeStyles = {
    styles: {
        src: 'assets/src/sass/client-styles/*.scss',
        dest: 'sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.styles.dest));
}



function watch() {
    scss();
    themescss();
    gulp.watch(paths.styles.src, scss);
    gulp.watch(themeStyles.styles.src, scss);
}

exports.watch = watch;

Я далеко?

Редактировать:

styles.scss

@import "config/grid.scss";  
@import "config/mixins.scss";  
@import "config/variables.scss";

Изменить 2

Немного обновили структуру моей папки до следующего 

theme
   assets
      src 
        sass
           config
              _variables.scss
              _mixins.scss
              _grid.scss
           client-styles
              _core.scss
              _buttons.scss
              _typography.scss
         _config.scss
         styles.scss

_config.s css

@import "config/grid.scss";  
@import "config/mixins.scss";  
@import "config/variables.scss";

Причина, по которой у меня есть этот файл, заключается в том, что я могу использовать @import "../../assets/src/sass/config.scss"; для использования vars и mixins в другом файле (например, hero.scss).

styles.s css

@import "client-styles/buttons";
@import "client-styles/typography";
@import "client-styles/core";

Последний gulpfile.js

'use strict';

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

// for module scss build

var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}

function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}

exports.scss = scss;

// for theme sass build

var themeStyles = {
    stylestheme: {
        src: 'assets/src/client-styles/*.scss',
        dest: 'sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.stylestheme.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.stylestheme.dest));
}

exports.themescss = themescss;


// watch

function watch() {
    scss();
    themescss();
    gulp.watch(paths.styles.src, scss);
    gulp.watch(themeStyles.stylestheme.src, scss);
}

exports.watch = watch;

Тест:

Закомментировали первую задачу наблюдения, чтобы увидеть, это меняет вещи. Не работает. По-прежнему нет файла css, созданного в папке стилей клиента s css.

Gulpfile. js для справки: 

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


var themeStyles = {
    stylestheme: {
        src: 'assets/src/client-styles/*.scss',
        dest: 'assets/src/sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.stylestheme.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.stylestheme.dest));
}

exports.themescss = themescss;

// watch

function watch() {
    themescss();
    gulp.watch(themeStyles.stylestheme.src, themeStyles);
}

exports.watch = watch;

1 Ответ

2 голосов
/ 30 марта 2020

Простое исправление для вашей конфигурации, это добавить новый файл client-styles.scss рядом с styles.scss с содержимым: 

@import "client-styles/buttons";
@import "client-styles/typography";
@import "client-styles/core";

и изменить путь в themeStyles функция: 

var themeStyles = {
  styles: {
    src: 'assets/src/**/*.scss',
    dest: 'assets/src/sass'
  }
}

Это изменение даст вам 2 css файлов, один styles.css и второй client-styles.scss.

Кроме того, я настоятельно рекомендую вам изучить шаблон 7 в 1 - это сэкономило мне много времени, когда я начал писать стили с помощью S css;)

Удачи!

PS по умолчанию Gulp будет извлекать только файлы в имени нет подчеркивания: style.scss - да, _style.scss - нет. Поэтому лучше иметь только 1 файл, в который мы хотим включить все стили проекта.

...