0

I have a workflow setup where I have all the config scss files housed under one folder. I then have a _styles.scss file where I'm importing all of these files.

Now, in another file, hero.scss, I'm referencing variables which are in those config files. But I get undefined errors.

I had a look further and found this other question from Stack Overflow, seems like the best answer is suggesting the same approach I have adopted, but it's not working for me?

Folder structure:

theme
   - assets
      - sass
         - config
            - _variables.scss
      - _styles.scss
   - modules
      - hero
         - hero.html
         - hero.scss

_variables.scss

$white: #FFF;
$black: #000;

`_styles.scss'

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

hero.scss

.hero{
   color: $white;
}

None of the imports work, because when trying to use the Bootstrap mixins i.e.

.hero{
    @include media-breakpoint-up(sm){
        color: $white;
    }
}

They don't work either, even though I've @imported them too. Edit:

If I do the following in hero.scss

@import "../../assets/sass/styles.scss";

.hero{
   background: $white;
}

Whilst the vars will now be recognised, when running gulp, all the styles from the files imported in styles/scss, they'll now be compiled alongside my module code.

For example:

My gulpfile.js for reference:

'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 the above is essentially doing is compiling scss files found in subfolders of the parent folder modules.

With this @import "../../assets/sass/styles.scss"; now added to hero.scss (which is housed under modules), it's now adding my config code to that modules css file.

Complete folder structure:

theme
    - assets
       - sass
          - config
             - _variables.scss
       - _client-styles.scss
       - styles.scss   
    - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (running gulp will compile this)

So hero.css, with the import is now contains code from hero.scss and client-styles.scss for example. Whereas I only need it to compile the sass from hero.scss.

Freddy
  • 683
  • 4
  • 35
  • 114
  • By the looks of it you need to import styles into `hero.scss` -> `@import "../../assets/sass/styles";` – Mr T Mar 27 '20 at 09:24
  • @MrT is right I think. Also you have to import hero.scss somewhere (_styles.scss?)... – Leon Vuković Mar 27 '20 at 09:56
  • @Leon Vuković `_styles.scss` is partial and won't be compiled to css if the setup is correct. – Mr T Mar 27 '20 at 10:13
  • @MrT - Hi, I've updated my question to state why I can't use that approach – Freddy Mar 27 '20 at 10:22
  • If you need just variables and mixins inside your `hero.scss`, then import just what you need. So `@import "../../../node_modules/bootstrap/scss/variables.scss"; @import "../../../node_modules/bootstrap/scss/mixins.scss"; @import "../../assets/config/variables.scss"; ` _you may need to correct paths_ – Mr T Mar 27 '20 at 10:35

0 Answers0