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

Since compass is a half-ruby and a half-sass framework, compass-mixins may work incorrectly whith legacy scss code.

To enable the original compass in your webpack config, you should use:

ruby-sass-loader

with the compass option.

module.exports = {
  // ...    
  module: {
    loaders: [
      /* some other loaders */
      {
        test: /\.scss$/,
        loader: 'style!css!ruby-sass?compass=1'
      }
    ]
  }
};

NB!: Compass is no longer supported

Answer 2

Essential addition to @Ayman Jitan answer https://stackoverflow.com/a/34967698/1114926.

You have to add these two lines at top of your styles.scss file:

@import "compass";  // <--
@import "compass/functions";  // <--

.foo {
    min-height: 100px;
    background-color: #fff;
}

Otherwise you'll get errors from sass-loader "Module build failed" and "No mixin" found. Like the following"

Module build failed:
undefined
                ^
      No mixin named background

If you add only @import "compass/functions"; (without @import "compass";), you may get this error (depends on the mixin you include, in my case it was thrown by @include background(linear-gradient(white, #cccccc, #aaaaaa));):

Module build failed:
undefined
                          ^
      Media query expression must begin with '('

Answer 3

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