在MEAN栈应用中使用Susy SCSS框架遇mixin未定义问题求助

看起来你遇到的核心问题是编译方式不匹配，以及Susy导入路径的处理逻辑和你当前使用的编译工具不兼容。让我们一步步拆解问题并解决：

问题根源分析 #

从你的错误信息可以看到，你是直接调用Ruby的scss.bat来编译SCSS文件的：

cmd.exe /D /C call C:/Ruby25-x64/bin/scss.bat --no-cache --update app.component.scss:app.component.css

但你的项目是基于webpack构建的MEAN应用，Susy是通过npm安装的，webpack的sass-loader和Ruby原生SCSS编译器的模块解析逻辑完全不同，这就导致了两个关键问题：

1. webpack的~别名（用来指向node_modules）在Ruby SCSS里不被识别
2. Ruby SCSS默认不会去node_modules目录下查找依赖模块，所以即使你用相对路径导入，也可能因为编译上下文的问题导致Susy的Mixin没被正确加载

解决方案 #

方案一：使用webpack进行构建（推荐，符合MEAN应用的常规流程） #

既然你的项目已经配置了webpack的sass-loader，应该通过webpack来处理SCSS编译，而不是直接调用Ruby的SCSS命令：

1. 修正webpack配置文件名：你的配置文件名写成了webpack.confif.common.js，应该是webpack.config.common.js（多了一个f），确保webpack能正确读取配置。
2. 恢复官方推荐的Susy导入方式：在app.component.scss里改回：

   @import "~susy/sass/susy";
   

   webpack的sass-loader会自动把~解析为项目根目录下的node_modules文件夹，所以这个路径是有效的。
3. 通过webpack命令构建：在package.json的scripts里添加构建命令：

   "scripts": {
     "build": "webpack --config webpack.config.common.js"
   }
   

   然后在终端运行npm run build，webpack会按照配置里的loader链（style-loader → css-loader → sass-loader）来编译SCSS，Susy的Mixin就能正常识别了。

方案二：如果一定要用Ruby SCSS编译（不推荐，会和webpack流程脱节） #

如果你暂时需要用Ruby的SCSS编译器来测试，可以通过添加加载路径的方式让它找到node_modules里的Susy：

1. 修改编译命令：在调用scss.bat时添加--load-path参数指定node_modules目录：

   scss --load-path node_modules --no-cache --update app.component.scss:app.component.css
   

2. 简化Susy导入路径：此时你可以直接用相对node_modules的路径导入，不需要写完整的相对路径：

   @import "susy/sass/susy";
   

   Ruby SCSS会通过你指定的加载路径找到Susy的文件，container Mixin就能正常使用了。

额外检查点 #

• 确认susy确实安装在项目根目录的node_modules里：运行ls node_modules/susy（Windows用dir node_modules\susy），确保sass/susy.scss文件存在。
• 检查webpack配置中的SCSS规则是否正确：你的配置里已经包含了.scss的loader规则，这部分是没问题的，只要确保webpack能正确读取配置文件即可。

内容的提问来源于stack exchange，提问作者tilly