SCSS Variables not loading across files

Question

I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:

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

gulp.task('sass',
            function (){
              return gulp.src('css/modules/*.scss')
              .pipe(sass())
              .pipe(gulp.dest('css'))
            }
);

When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?

I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.

@import "./modules/_reset.scss";
@import "./modules/_base.scss";
@import "./modules/_header.scss";
@import "./modules/_footer.scss";
@import "./modules/_blocks.scss";
@import "./modules/_interviews.scss";
@import "./modules/_search.scss";

Mohamed Talaat · Accepted Answer · 2020-11-09 09:21:05Z

1

in your case, there is two things to tell >>>

first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files

second: scss files starting with ( _ ), get ignored when compiling in gulp-sass, it is like telling the gulp-sass compiler that these files are for import only.

answered Nov 9, 2020 at 9:21

Mohamed Talaat

1969 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2020-11-04 16:04:51Z

0

Try with this:

return gulp.src('css/main.scss')

in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.

You want just main.css at the end to include in your html file.

answered Nov 4, 2020 at 16:04

Mark

192k32 gold badges557 silver badges580 bronze badges

Collectives™ on Stack Overflow

SCSS Variables not loading across files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related