0

I have the following folder structure setup:

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

_theme-styles.scss is really simple at the moment and looks like this:

// VARS
$white: #FFFFFF;

_styles.scss looks like this:

@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";

And for reference, my gulpfile.js looks like this:

'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

What I'm trying to do

I want to reference a variables and mixins defined in other files. For example, with my current workflow set as is, in hero.scss I have:

.hero { background: $white; }

I've defined this variable in _theme-styles.scss and want to be able to use it here without redefining.

Similarly, when using mixins, i.e. example below:

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

The above mixin is defined in the bootstrap node module folder. But when referencing these I get undefined errors when running gulp watch.

Freddy
  • 683
  • 4
  • 35
  • 114

1 Answers1

0

At the top of hero.scss you should

@use 'pathsToYourOtherSCSSFiles';

like:

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

I didn't test those paths but they should be the relative path from your hero.scss file to the ones you want to @use. See https://sass-lang.com/guide Modules

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Is there any way to do this without adding the above to every module I create? – Freddy Mar 26 '20 at 17:02
  • The only possible alternative is to have one scss file at the top of your modules or assets folder that `@use` all the files there and then each child scss below that `@use`'s that one file. I haven't tried it but I believe you can chain `@use` calls in that way. In any case you're going to have to `@use` something into each of your modules - either one file that collects all the `@use`s or each of them separately. – Mark Mar 26 '20 at 19:47
  • I was looking into a more "master file" generated approach. For example like the one answered in this post: https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files . However, as you can see in my original question, using @import still comes with undefined errors – Freddy Mar 27 '20 at 09:00
  • These lines look incorrrect: `@import "../../../node_modules/bootstrap/scss/bootstrap.scss";` did you mean `@import "./././node_modules/bootstrap/scss/bootstrap.scss";` or possibly `@import "../node_modules/bootstrap/scss/bootstrap.scss";`? – Mark Mar 27 '20 at 15:15