How to run extra scripts when packaging a library

[parky128]

I am just getting started with Nx and have an existing lerna based Angular project containing a bunch of packages that get built and published to NPM independently.

In many of these packages, we have custom build scripts that get run like so:

  "scripts": {
    "build": "node --max_old_space_size=10000 ../../node_modules/@angular/cli/bin/ng build ng-generic-components && npm run bundle-styles",
    "bundle-styles": "npm run bundle-style-utilities && npm run bundle-theme && npm run bundle-compatible",
    "bundle-theme": "../../node_modules/scss-bundle/dist/bundle-cli.js -c org-theme.bundle-config.json",
    "bundle-style-utilities": "../../node_modules/scss-bundle/dist/bundle-cli.js -c utilities.bundle-config.json",
    "bundle-compatible": "../../node_modules/scss-bundle/dist/bundle-cli.js -c compatible.bundle-config.json",

As you can see, this is to run a bunch of style preprocessor scripts so we can get some global styles included in our final bundle.

So my question is, how can I get the Nx library builder to run extra steps like the above as part of its packaging?

I have seen section in the Nx docs about custom builders and executors, so I wondered if these may help me, but I am not totally sure.

I also came across this answer by @vsavkin

This seems to be the kind of thing I need and so I have attempted it for my library like so:

"base-build": {
    "builder": "@nrwl/angular:package",
    "outputs": [
        "dist/libs/ng-generic-components"
    ],
    "options": {
        "project": "libs/ng-generic-components/ng-package.json"
    },
    "configurations": {
        "production": {
            "tsConfig": "libs/ng-generic-components/tsconfig.lib.prod.json"
        },
        "development": {
            "tsConfig": "libs/ng-generic-components/tsconfig.lib.json"
        }
    },
    "defaultConfiguration": "production"
},
"build": {
    "builder": "@nrwl/workspace:run-commands",
    "options": {
        "commands": [
            "nx base-build ng-generic-components",
            "node_modules/scss-bundle/dist/bundler.js -c alertlogic-theme.bundle-config.json"
        ],
        "parallel": false
    }
}

But when it runs, I see the base-build step completes in my terminal but then I get a permission denied at the scss-bundle step:

/bin/sh: node_modules/scss-bundle/dist/bundler.js: Permission denied
ERROR: Something went wrong in @nrwl/run-commands - Command failed: node_modules/scss-bundle/dist/bundler.js -c alertlogic-theme.bundle-config.json --verbose=true
Error: ERROR: Something went wrong in @nrwl/run-commands - Command failed: node_modules/scss-bundle/dist/bundler.js -c alertlogic-theme.bundle-config.json --verbose=true
    at /Users/robert.parker/Documents/Github/al-magma-console/node_modules/@nrwl/workspace/src/executors/run-commands/run-commands.impl.js:53:19
    at Generator.throw (<anonymous>)
    at rejected (/Users/robert.parker/Documents/Github/al-magma-console/node_modules/tslib/tslib.js:115:69)

Do I need to be doing anything with regards to permissions to this scss-bundle dir, or should this just work?

Thanks