@blue-modus/angular-configdeprecated

Angular CLI Post-install Script

This script was developed for use by BlueModus to modify the Angular CLI to work with PUG and SCSS.

Install

npm i @blue-modus/angular-config --save-dev

Basic Usage

This script can be added as a postinstall script in your package.json (which will run at the end of npm i) like this: "postinstall": "node node_modules/@blue-modus/angular-config/index.js"

Or you can run it directly in your terminal at any time like this: node node_modules/@blue-modus/angular-config/index.js

Description & Assumptions

This script updates the default Angular CLI templates and webpack files. It does this in several steps:

1. It adds the Angular PUG loader to the webpack.config file.
2. It replaces the component template's HTML file with a PUG file (so ng g c [component-name] creates a PUG file rather than HTML).
3. It modifies the component TypeScript file to use the URL for the PUG template (rather than the HTML file).
4. It adds some default includes to the component .scss file @import 'variables', 'functions', 'mixins';

This script also makes a few assumptions about how your project was setup:

1. The project was initiated with the Angular CLI using the SCSS flag: ng new [app-name] --style=scss
2. You have installed the pug-ng-html-loader via: npm i pug-ng-html-loader --save-dev
3. You have added the following lines to your .angular-cli.json file:

   "stylePreprocessorOptions": {
       "includePaths": [
           "styles/scss"
       ]
   },
   

4. Your SCSS is structured like this:

   src/
   |--- styles/
       |--- main.scss
       |--- scss/
           |--- _variables.scss
           |--- _functions.scss
           |--- _mixins.scss
   

5. Your main.scss file should @import the these three partials as well as any others you create for global styles. All of your [my-component].component.scss files will automatically include these when generated with the CLI so you have access to global variables, functions, and mixins.