sass Variablen arbeiten nicht in Yeoman webapp

Question

Ich rüstete ein Webapp-Projekt mit Yeoman. Nachdem ich meine Sass-Ordnerstruktur eingerichtet hatte, bemerkte ich, dass die Variablen nicht funktionierten. Im Folgenden ist meine sass Ordnerstruktur:

|-styles 
    |- sass 
     |-base 
      |-_base.scss 
      |-_colors.scss 
      |-_font.scss 
      |-_normalize.scss 
      |-_index.scss 
     |-layouts 
     |-modules 
     |-vendors 
    |- main.scss 

ich für jede der Teilordner eine index.scss erstellt alle Teildateien innerhalb @import.

@import 'normalize'; 
@import 'colors'; 
@import 'fonts'; 
@import 'base'; 

main.scss importiert alle index.scss von jedem Ordner.

@import 'sass/base/index'; 

Und wenn ich versuche, sass Variable für einen Farbwert in den Farben teilweise zu verwenden, zum Beispiel.

$main = '#B260C2'; 

h1 { 
    color: $main; 
} 

Es funktioniert einfach nicht. Wenn ich jedoch die Variable sass entferne und einfach css schreibe, funktioniert es gut. Ich bin ziemlich neu in Yeoman und schlucke, also bin ich mir nicht sicher, was ich hier falsch gemacht habe. Unten ist das Standard-Schluck-Datei-Setup, das mit dem Webapp-Generator geliefert wird.

// generated on 2016-10-30 using generator-webapp 2.2.0 
const gulp = require('gulp'); 
const gulpLoadPlugins = require('gulp-load-plugins'); 
const browserSync = require('browser-sync'); 
const del = require('del'); 
const wiredep = require('wiredep').stream; 
const runSequence = require('run-sequence'); 

const $ = gulpLoadPlugins(); 
const reload = browserSync.reload; 

gulp.task('styles',() => { 
    return gulp.src('app/styles/*.scss') 
    .pipe($.plumber()) 
    .pipe($.sourcemaps.init()) 
    .pipe($.sass.sync({ 
     outputStyle: 'expanded', 
     precision: 10, 
     includePaths: ['.'] 
    }).on('error', $.sass.logError)) 
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) 
    .pipe($.sourcemaps.write()) 
    .pipe(gulp.dest('.tmp/styles')) 
    .pipe(reload({stream: true})); 
}); 

gulp.task('scripts',() => { 
    return gulp.src('app/scripts/**/*.js') 
    .pipe($.plumber()) 
    .pipe($.sourcemaps.init()) 
    .pipe($.babel()) 
    .pipe($.sourcemaps.write('.')) 
    .pipe(gulp.dest('.tmp/scripts')) 
    .pipe(reload({stream: true})); 
}); 

function lint(files, options) { 
    return gulp.src(files) 
    .pipe(reload({stream: true, once: true})) 
    .pipe($.eslint(options)) 
    .pipe($.eslint.format()) 
    .pipe($.if(!browserSync.active, $.eslint.failAfterError())); 
} 

gulp.task('lint',() => { 
    return lint('app/scripts/**/*.js', { 
    fix: true 
    }) 
    .pipe(gulp.dest('app/scripts')); 
}); 
gulp.task('lint:test',() => { 
    return lint('test/spec/**/*.js', { 
    fix: true, 
    env: { 
     mocha: true 
    } 
    }) 
    .pipe(gulp.dest('test/spec')); 
}); 

gulp.task('html', ['styles', 'scripts'],() => { 
    return gulp.src('app/*.html') 
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) 
    .pipe($.if('*.js', $.uglify())) 
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false}))) 
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true}))) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('images',() => { 
    return gulp.src('app/images/**/*') 
    .pipe($.cache($.imagemin())) 
    .pipe(gulp.dest('dist/images')); 
}); 

gulp.task('fonts',() => { 
    return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 
    .concat('app/fonts/**/*')) 
    .pipe(gulp.dest('.tmp/fonts')) 
    .pipe(gulp.dest('dist/fonts')); 
}); 

gulp.task('extras',() => { 
    return gulp.src([ 
    'app/*', 
    '!app/*.html' 
    ], { 
    dot: true 
    }).pipe(gulp.dest('dist')); 
}); 

gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); 

gulp.task('serve',() => { 
    runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'],() => { 
    browserSync({ 
     notify: false, 
     port: 9000, 
     server: { 
     baseDir: ['.tmp', 'app'], 
     routes: { 
      '/bower_components': 'bower_components' 
     } 
     } 
    }); 

    gulp.watch([ 
     'app/*.html', 
     'app/images/**/*', 
     '.tmp/fonts/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles']); 
     gulp.watch('app/scripts/**/*.js', ['scripts']); 
     gulp.watch('app/fonts/**/*', ['fonts']); 
    gulp.watch('bower.json', ['wiredep', 'fonts']); 
    }); 
}); 

gulp.task('serve:dist',() => { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['dist'] 
    } 
    }); 
}); 

gulp.task('serve:test', ['scripts'],() => { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    ui: false, 
    server: { 
     baseDir: 'test', 
     routes: { 
     '/scripts': '.tmp/scripts', 
     '/bower_components': 'bower_components' 
     } 
    } 
    }); 

    gulp.watch('app/scripts/**/*.js', ['scripts']); 
    gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload); 
    gulp.watch('test/spec/**/*.js', ['lint:test']); 
}); 

// inject bower components 
gulp.task('wiredep',() => { 
    gulp.src('app/styles/*.scss') 
    .pipe(wiredep({ 
     ignorePath: /^(\.\.\/)+/ 
    })) 
    .pipe(gulp.dest('app/styles')); 

    gulp.src('app/*.html') 
    .pipe(wiredep({ 
     ignorePath: /^(\.\.\/)*\.\./ 
    })) 
    .pipe(gulp.dest('app')); 
}); 

gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'],() => { 
    return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 
}); 

gulp.task('default',() => { 
    runSequence(['clean', 'wiredep'], 'build'); 
}); 

Answer 1

Sie erklären sass Variable als solche:

$var: value; 

Nicht mit dem = Zeichen, wie Sie in Ihrer Frage eingefügt.