Impossible to use Susy mixins on my project

Question

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

score 2 · Accepted Answer · answered Jul 09 '17 at 19:33

2

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.

answered Jul 09 '17 at 19:33

Miriam Suzanne

13,632
2
38
43

Hey thanks. That's it. I got it i was using since now an old version of susy and then i moved my project to a new configuration and i downloaded susy 3.0 wiyhout knowing that all mixins are missing. Got it now. Thanks a lot – user8272438 Jul 09 '17 at 19:45

score 1 · Answer 2 · answered Dec 27 '20 at 15:45

this problem is based on the version of susy you are using. mixin comes from susy 2, and having been removed in susy 3.

If you installed susy via npm. you have to change the version of susy in the package.json file to "susy": "<3.0.0" then run this command : npm install susy.

Impossible to use Susy mixins on my project

2 Answers2