sasswebpack-2postcsssusy

Impossible to use Susy mixins on my project

I am moving an existing code to a new configuration based on webpack+postCSS.

I use compass and susy.

No problem with compass mixins. However with susy i cannot use any mixin. for example if i try to use the container mixin i get the following error :

No mixin named container

I have no idea about what causes this issue. I don't have it with compass.

This is my current situation :

/* style.scss */

@import "compass";
@import "~susy/sass/susy";
.nav{
  @include container(300px);
  border: 1px solid;
}

/* webpack.config.js */

{ test: /\.s(a|c)ss$/,
        use: [
          'babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['node_modules', 'node_modules/compass-mixins/*']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }

/* postcss.config.js */

module.exports =  {
  plugins: [
    require('postcss-easy-import')({prefix: '_',extensions:['.css','.scss']}),
    require('autoprefixer')(),
  ]
}

Thanks for help

Solution

  • What version of Susy are you using?

    Susy 3.0 removed all the mixins, and has other major breaking changes. You can read more in the updated reference docs or the introductory article.