不可能在我的项目中使用 Susy mixins

Question

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

我使用指南针和苏西。

指南针混合没有问题。但是，对于苏西，我不能使用任何混合。例如，如果我尝试使用容器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 删除了所有混音，并进行了其他重大的突破性更改。您可以在更新的参考文档或介绍性文章中阅读更多信息。

Answer 2

此问题基于您正在使用的 Susy 版本。 mixin 来自 Susy2，并在 Susy3 中删除。

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