Doesn't work with SASS, the output file is empty

[seregap]

Hello

The output file appears empty

• "postcss-loader": "^0.11.0"
• "sass-loader": "4.0.0"
• node: '5.3.0'

the webpack.config.js fragment is as follows:

module : {
        loaders : [{
            test   : /\.scss$/,
            loader : (ExtractTextPlugin.extract('style', 'css!postcss!sass', {  }))
    }]
    },
postcss: [
      require('postcss-extract')({
               extract: {
                 'important': path.join(__dirname, './test.css')
            }
      }),
]

[Nitive]

Could you please show sass file content? Just confugure webpack and everything works fine

[Nitive]

I added examples, check out examples/ folder

[seregap]

sure, here you go

entry app.js

'use strict';
var core = require('core.scss');

core.scss

@import 'modules/buttons';

buttons.scss

.button-group {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-bottom: 1px solid $greyBorders;
    border-radius: 5px;
    overflow: hidden;
    .button {
        display: block;
        border-radius: 0;
        white-space: nowrap;
    }
    &__item {
        display: table-cell;
    }
    @important {
        display: inline-block;
    }
}  

[seregap]

@Nitive did you try it with sass-loader?

[Nitive]

@seregap Sass process & with at rules not correctly

You can use extra braces

@important {
  & {
    display: inline-block;
  }
}

[seregap]

@Nitive it won't be processed by postcss-extract anyway, as the @rule shuld be inside selector but not outside. This is a default behaviour for @rules in any CSS preprocessor including SASS (@rule bubbles up to the css root). It would be great to have an option to change the plugin logic if needed for such cases.

your code snippet above can be even simplyfied to be as follows, but it won't help

input sass:

.button-group {
  @important {
      display: inline-block;
  }
}

output css:

@important {
  .button-group {
    display: inline-block;
  }
}

required by postcss-extract input css:

.button-group {
  @important {
    display: inline-block;
  }
}

[Nitive]

@seregap at rule outside selector will work fine, check out this test

[Nitive]

Added example in README in #141

[seregap]

@Nitive seems it somehow breaks inside my code. Many thanks