stories include font awesome - Can't resolve variables

[denisemauldin]

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.1
Node: 10.0.0
OS: linux x64
Angular: 6.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

node --version
v10.0.0
npm --version
5.6.0

Linux localhost.localdomain 3.10.0-514.16.1.el7.x86_64 #1 SMP Wed Apr 12 15:04:24 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

Repro steps

• Install angular 6

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app

• Follow these directions for SASS: https://github.com/angular/angular-cli/wiki/stories-include-font-awesome

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

• ng serve

Observed behavior

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed: Error: Can't resolve 'variables' in '/var/www/mydream-app/src'
    at doResolve (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:177:19)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn0 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at resolver.doResolve (/var/www/mydream-app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn0 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn0 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
    at resolver.doResolve (/var/www/mydream-app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn5 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:57:1)
    at resolver.doResolve (/var/www/mydream-app/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:23:37)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn0 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at hook.callAsync (/var/www/mydream-app/node_modules/enhanced-resolve/lib/Resolver.js:232:5)
    at _fn1 (eval at create (/var/www/mydream-app/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:24:1)

Desired behavior

Update the stories include font awesome to specify the angular.json config:

Make sure that angular.json is using styles.**scss**
// in angular.json
"build": {
  "options": {
    "styles": [
      "styles.scss"
    ],
  }
}

Mention any other details that might be useful (optional)

[denisemauldin]

So this is because I didn't know that the section under Using SASS should have been put into the styles.scss file instead of the styles.css file. So the solution was to rename the file and then update angular.json to look for styles.scss. Can we change the documentation to add a line under the Using SASS header that it should be in src/styles.scss or that it should be generated with ng new my-app --style=scss?

[Brocco]

Of course, this would need a PR to update the documentation here to include the additional information.

[rafaelss95]

Also, note that this doc is only for font awesome 4x. 5x is completely different.

[chris-milliano]

Opened #10911

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}