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

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 '('