CODEWITHSUNDEEP
webpack-2
allencoded
allencoded

Reputation: 7275

Converting from gulp-sass to webpack 2 sass-loader

I am migrating from gulp/jspm to webpack. Everything is seemingly going fine by our SASS. In gulp our task looks like so:

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'));
});

And thus works perfectly. This is my current webpack config for SASS:

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

And in the plugins I have:

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

The problem is when I run webpack I get these SASS errors:

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)

I am getting tons of those type of errors which I don't understand since the gulp sass tool never threw those errors before. I feel like some configuration is missing.

Upvotes: 0

Views: 696

Answers (1)

allencoded
allencoded

Reputation: 7275

In my main.js file I was missing my sass include. Thus it was just compiling all that sass but with no particular order.

Upvotes: 1

Related Questions