SASS / Gulp: использование mixins и переменных из другого файла - PullRequest
Новая
       46

SASS / Gulp: использование mixins и переменных из другого файла

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

У меня есть следующие настройки структуры папок: 

theme
   - assets
      - sass
         - _theme-styles.scss
      - _styles.scss
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (gulp will compile this file)

_theme-styles.s css на данный момент очень прост и выглядит следующим образом: 

// VARS
$white: #FFFFFF;

_styles.s css выглядит так: 

@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "../../../node_modules/bootstrap/scss/variables.scss";
@import "../../../node_modules/bootstrap/scss/mixins.scss";

$grid-breakpoints: (
  xs: 0px,
  sm: 576px,
  md: 786px,
  lg: 992px,
  xl: 1200px,
);

// Import Globals
@import "config/**.scss";

И для справки, мой 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
function watch() {

    scss()

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

Что я пытаюсь сделать

Я хочу сослаться на variables и mixins, определенные в других файлах. Например, с моим текущим рабочим процессом, установленным как есть, в hero.s css у меня есть:

.hero { background: $white; }

Я определил эту переменную в _theme-styles.s css и хотите иметь возможность использовать его здесь без переопределения.

Аналогично, при использовании миксинов, т.е. пример ниже: 

.hero{
    @include media-breakpointup(md){
        padding: 60px;
    }
}

Вышеуказанный mixin определен в папке модуля узла bootstrap. Но при обращении к ним я получаю undefined errors при запуске gulp watch.

1 Ответ

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

Вверху из hero.scss вы должны 

@use 'pathsToYourOtherSCSSFiles';

как: 

@use '../assets/sass/theme-styles';
@use '../assets/styles';
and same to the bootstrap file with the mixin defined

Я не тестировал эти пути, но они должны быть относительный путь от вашего hero.scss файла к тем, которые вы хотите @use. См https://sass-lang.com/guide Modules

...