yeoman webappでsass変数が機能しない

Question

私はyeomanを使用してwebappプロジェクトをスキャフォールドしました。私のSassフォルダ構造の設定を取得した後、私はSass変数が動作していないことに気付きました。以下は、私のSASSのフォルダ構造です：

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

私は内のすべての部分のファイルを@importする部分のフォルダのそれぞれについて、index.scssを作成しました。

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

main.scssは各フォルダからすべてのindex.scssをインポートします。

@import 'sass/base/index'; 

そして、私は色の値にsass変数を使用しようとしました。

$main = '#B260C2'; 

h1 { 
    color: $main; 
} 

これは機能しません。しかし、sass変数を削除して単純なcssを書くと、正常に動作します。私はYeomanとgulpにはかなり新しいので、ここで何が間違っていたのか分かりません。以下は、webappジェネレータに付属するデフォルトのgulpファイルの設定です。

// 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

は、次のようなSASS変数を宣言：あなたは、あなたの質問に貼り付け

$var: value; 

ない=記号と同じように。