2017-01-09 12 views
0

Ich bin von Gulp/Jspm zu Webpack migrieren. Mit unserer SASS läuft scheinbar alles gut. Im Schluck sieht unsere Aufgabe so aus:Umwandlung von Gulp-Sass zu Webpack 2 Sass-Loader

var gulp = require('gulp'); 
var sourcemaps = require('gulp-sourcemaps'); 
var sass = require('gulp-sass'); 
var autoprefixer = require('autoprefixer'); 
var paths = require('../paths'); 
var flatten = require('gulp-flatten'); 
var postcss = require('gulp-postcss'); 

gulp.task('build-sass',() => { 
    return gulp.src(paths.sassSource) 
    .pipe(sourcemaps.init()) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(postcss([autoprefixer()])) 
    .pipe(flatten()) 
    .pipe(sourcemaps.write('/maps')) 
    .pipe(gulp.dest(paths.output + 'css')); 
}); 

Und so funktioniert perfekt. Dies ist meine aktuelle webpack Config für SASS:

{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract({ 
     fallbackLoader: 'style-loader', 
     loader: 'css-loader?sourceMap!postcss-loader!sass-loader?sourceMap', 
     }), 
    }, 

Und in den Plugins, die ich habe:

new ExtractTextPlugin({ 
      filename: 'global.css', 
      allChunks: true, 
     }), 

Das Problem ist, wenn ich webpack betreibe ich diese SASS Fehler erhalten:

ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?sourceMap!./src/sass/base/_QB4-variables.scss 
    Module build failed: 
    $never-signed-in: $gray-light; 
        ^
      Undefined variable: "$gray-light". 
      in /Users/allen/work/TwentyTwenty.QualBoard.Web/src/sass/base/_QB4-variables.scss (line 31, column 19) 

Ich bekomme Tonnen dieser Art von Fehlern, die ich nicht verstehe, da das Schluckwerkzeug nie zuvor diese Fehler geworfen hat. Ich habe das Gefühl, dass eine Konfiguration fehlt.

Antwort

1

In meiner main.js Datei fehlte mir mein sass include. So wurde nur das ganze Sass zusammengestellt, aber ohne besondere Reihenfolge.