CODEWITHSUNDEEP
sasswebpackloader
stach
stach

Reputation: 2161

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

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

Upvotes: 6

Views: 4170

Answers (2)

user2504723
user2504723

Reputation:

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

Upvotes: 6

Jon Shamir
Jon Shamir

Reputation: 1

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

Upvotes: 0

Related Questions