Webpack - how to configure base directory path for sass loader?

Question

I'm trying to follow some tutorials and documentation and have the webpack build for me sass files into separates css files.

It all kind of works, as long as I'm proving full relative path in require:

require("../sass/ss.scss")

But it I want to use:

require("./ss.scss")

and I turn comment out the 'sassLoader' in the config, I get error:

[1] "sassLoader" is not allowed

As you can see I have been trying to use inline settings too:

sourceMap&includePaths[]=' + (PATHS.sass)

but they are ignored.

What am I doing wrong?

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const validate = require('webpack-validator');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  js: path.join(__dirname, 'app', 'js'),
  sass: path.join(__dirname, 'app', 'sass'),
  build: path.join(__dirname, 'build')
};

const common = {

  // Entry accepts a path or an object of entries.
  // We'll be using the latter form given it's
  // convenient with more complex configurations.
  entry: {
    app: path.join(PATHS.js, 'index.js')
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    }),
    new ExtractTextPlugin(
      '[name].css', {
        allChunks: true
      }
    ),
  ],
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style!css?sourceMap!sass?sourceMap&includePaths[]=' + (PATHS.sass)
        )
      }
    ]
  }
  // sassLoader: {
  //   includePaths: [PATHS.sass]
  // }
};


var config;

// Detect how npm is run and branch based on that
switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(common,
      {}
    );
    break;
  default:
    config = merge(common,
      {}
    );
}

module.exports = validate(config);

Digging further in: Still no idea why 'sassLoader' cannot be used, but now I'm sure that those inline-query parameters get there to the sass-loader. Thing is: the includePaths are only good for intra-scss @import statements. — stach, Jul 14 '16 at 21:10

score 6 · Answer 1 · answered Aug 05 '16 at 14:22

The error comes from webpack-validator because it doesn't recognize the sassLoader property. You need to configure a schema extension:

const Joi = require('webpack-validator').Joi

const schemaExtension = Joi.object({
  sassLoader: Joi.any(),
})

module.exports = validate(config, {schemaExtension: schemaExtension})

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

Requiring CSS modules is handled by the css-loader, only @import is handled by sass-loader. (There are major differences in their behaviour other than that, make sure you are using what you need).

In order to require from the root directory, you need to configure resolve.root in the webpack config file. See answer here: Resolving require paths with webpack

edited May 23 '17 at 12:33

Community

1
1

answered Jul 25 '16 at 14:35

Jon Shamir

1
1

Webpack - how to configure base directory path for sass loader?

2 Answers2