12

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

David Auvray
  • 288
  • 1
  • 3
  • 20

3 Answers3

6

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

Evan Lévesque
  • 3,115
  • 7
  • 40
  • 61
  • 1
    Nope. That plugin doesn't have `background` mixin. `Module build failed: No mixin named background` – Green Mar 14 '16 at 11:56
  • @Green adding @ import "compass"; to the beginning of every file where I use compass mixins solves this, I am not sure if it's the best approach though – coiso Jun 08 '16 at 16:19
  • *@import ..damn stack overflow exaggerated rules, they wouldn't let me use @ followed by something twice – coiso Jun 08 '16 at 16:22
  • @Green all background mixins do exist in the compass-mixins. – Evan Lévesque Jul 21 '16 at 19:36
  • @coiso importing resources (such as compass) in the header of each of your scss files does not make any sense and it seems very redundant. I updated my answer with a solution for this issue – Evan Lévesque Jul 21 '16 at 19:36
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 '('
Community
  • 1
  • 1
Green
  • 28,742
  • 61
  • 158
  • 247
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

Anton
  • 639
  • 6
  • 17