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

Answer 1

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 .

Answer 2

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.