How to configure webpack to use compass in my project

Question

I'm new in webpack and i don't know how we can use Compass ( CSS Authoring Framework ) in a project.

Is there a good method ?

Thanks

Answer 1

you can use compass-mixins

var path = require('path');
module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
      }
    ]
  }
};

here is a helpful webpack boilerplate

Update:

You can use sass-resources-loader that will @import your SASS resources into every required SASS module. where you will never have to import your resources in all your sass files.

module.exports = {
  ...,
  module: {
    loaders: [
      ...,
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css',
          'sass?outputStyle=expanded&includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib'),
          'sass-resources'
        ]
      }
    ]
  },
  sassResources: path.resolve(__dirname, './client/app/resources/stylesheets/base.scss')

please check the implementation in action in this boilerplate