css - 在 Mean-stack 应用程序中使用 Susy Scss 框架

Question

所以我刚刚发现了 susy 框架来改进我的 scss 文件，我想在我的 MEAN-app 中使用它。我阅读了文件并按照说明进行操作。但是，我无法在我的 scss 文件中使用它。我按照以下步骤操作：

1. 安装 Susy： npm install susy

2. 确保已安装 sass-loader： npm install sass-loader --save-dev

3. 在 webpack 配置（webpack.confif.common.js）中启用了 Sass 加载器：

   module.exports = { entry: { 'app': './assets/app/main.ts' },

   resolve: {
       extensions: ['.js', '.ts']
   },
   
   module: {
       rules: [
           {
               test: /\.html$/,
               use: [{ loader: 'html-loader' }]
           },
           {
               test: /\.css$/,
               use: [{ loader: 'raw-loader' }]
           },
           {
               test: /\.scss$/,
               use: ['style-loader', 'css-loader', 'sass-loader']
           }
       ],
       exprContextCritical: false
   
   }
   

   };

4. 在我的 app.component.scss 中导入 susy：网站声明我应该使用@import "~susy/sass/susy";，但这给了我一个错误，所以我添加了一个相对路径：@import "../../node_modules/susy/sass/susy";

这就是我的 app.component.scss 文件现在的样子：

@import "SCSS variables/theme-colors";
@import "../../node_modules/susy/sass/susy";


$susy: (
        columns: 16,
        debug: (image: show),
        global-box-sizing: border-sizing
);

$medium-screen: 720px;
$link-color: #330000;

a {
  color: $link-color;

  &:hover {
    color: lighten($link-color, 25%);
  }
}

.container {
  @include container();
}

**这是我得到的错误**

cmd.exe /D /C call C:/Ruby25-x64/bin/scss.bat --no-cache --update app.component.scss:app.component.css error app.component.scss (Line 23: Undefined混合“容器”。）

进程以退出代码 1 结束

有人可以看到我可能做错了什么吗？

标签： cssangularwebpacksass