Question

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

我使用罗盘和苏西。

罗盘mixins没问题。然而有了susy我不能使用任何mixin。例如，如果我尝试使用容器mixin，我会收到以下错误：

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

{{1}}

感谢您的帮助

Answer 1

您使用的是什么版本的Susy？

Susy 3.0删除了所有mixins，并有其他重大突破性变化。您可以在updated reference docs或introductory article中阅读更多内容。

Answer 2

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

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

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

2 个答案: