在angular中免eject使用pug及stylus插件

当我们用angular cli创建项目后，会发现虽然项目中使用了webpack，但并没有webpack的相关配置。

其实不是没有，只是被隐藏起来了而已。

那么问题就来了，如果angular cli使用的默认webpack配置无法满足我们的需求时，怎么办呢？

此时，要么是放弃，转用其他路子，要么是用eject把webpack配置暴露出来。

对于高级玩家，eject肯定没问题，但对于非高级玩家，难道只能放弃了？

不，其实我们还是有方法可以不用eject也能实现一些高级配置的，当然这个方法中级玩家可以考虑，初级玩家最好搬个小凳子在旁边嗑瓜子看看。

话不多说，下面通过实际说明，实现免eject使用pug及stylus插件。

首先，我们需要安装一个依赖，npm install angular-app-rewired，然后在项目根目录建立一个叫ng-rewired.js的文件，内容如下：

var stylusLoader = require('stylus-loader');

module.exports = {
  getCommonConfig: function (config) {
    config.module.rules.push({
      test: /\.pug$/,
      use: [
        'apply-loader',
        'pug-loader'
      ]
    });
  },

  getStylesConfig: function (config) {
    config.plugins.push(new stylusLoader.OptionsPlugin({
      default: {
        include: [__dirname + '/node_modules'],
        use: [require('stylus-less')()]
      }
    }));
  }
}

然后安装对应的依赖。
pug需要npm install pug pug-loader apply-loader。
stylus插件安装对应的即可，我这里是npm install stylus-less。

光是getCommonConfig那块的代码就可以支持pug，getStylesConfig那块的代码是为了使用stylus插件。
在stylus的配置中，我包含了node_modules目录，这样就可以直接在stylus中import node_modules下的文件了；其次是使用了stylus-less插件，用于导入less的变量。
这样，只需要在stylus中import-less(‘ng-zorro-antd/src/style/themes/default’)，就可以使用zorro中的$primary-color变量了。

最后，修改package.json，把start脚本和build脚本中的ng改为ng-rewired，就大功告成了！