從gulp-sass轉換爲webpack 2 sass-loader

我正在從gulp/jspm遷移到webpack。我們的SASS似乎一切正常。我們的任務看起來像這樣：從gulp-sass轉換爲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')); 
});

因此完美地工作。這是SASS我目前的WebPack配置：

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

而在插件我：

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

問題是，當我運行的WebPack我得到這些SASS錯誤：

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)

我收到了那些我不明白的類型的錯誤，因爲這些漏洞工具從未拋出過這些錯誤。我覺得缺少一些配置。

來源

2017-01-09 allencoded

在我的main.js文件中，我錯過了我的sass include。因此，它只是編譯所有的文件，但沒有特別的順序。

來源

2017-01-09 19:59:26 allencoded

從gulp-sass轉換爲webpack 2 sass-loader

回答

相關問題