CODEWITHSUNDEEP
sasswebpack-2postcsssusy
user8272438
user8272438

Reputation: 13

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

Upvotes: 0

Views: 715

Answers (2)

behnaz.sheikhi
behnaz.sheikhi

Reputation: 714

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.

Upvotes: 1

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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.

Upvotes: 2

Related Questions