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

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

Answer 1

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

Answer 2

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