无法在我的项目中使用 Susy mixins

Question

我正在将现有代码移动到基于 webpack+postCSS 的新配置。

我用指南针和susy。

罗盘混合没问题。但是对于 susy，我不能使用任何 mixin。例如，如果我尝试使用容器 mixin，我会收到以下错误：

No mixin named container

我不知道是什么原因导致了这个问题。我没有指南针。

这是我目前的情况:

/* 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')(),
  ]
}

感谢帮助

Answer 1

您使用的是哪个版本的 Susy？

Susy 3.0 删除了所有混合宏，并进行了其他重大的重大更改。您可以在 updated reference docs or the introductory article.

中阅读更多内容

Answer 2

此问题与您使用的 susy 版本有关。 mixin 来自 susy 2，并已在 susy 3 中删除。

如果你通过 npm 安装了 susy。您必须将 package.json 文件中的 susy 版本更改为 "susy": "<3.0.0" 然后运行此命令：npm install susy.

无法在我的项目中使用 Susy mixins

Impossible to use Susy mixins on my project

sass

webpack-2

postcss

susy