Herr Josua
Herr Josua

Reputation: 453

Angular CLI - missing SASS Import

I'm working on a project that is using the the U.S. Web Design Standards framework and I have imported all the SASS files into my main.scss file:

@import "bourbon/bourbon";

@import "abstracts/variables";

// This imports all the required files 
@import "../vendor_files/uswds/src/stylesheets/uswds";

But I'm noticing that some of the grid styles are missing when I run my local server. Just as a test I did a sass compile via my terminal and was able to find the associated grid styles. I can provide additional information if needed.

Versions

@angular/cli: 1.6.0
node: 8.8.1
os: darwin x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.6.0
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Repro steps

My sample repo

  1. npm install
  2. npm start

Observed behavior

screen shot 2017-12-07 at 08 59 40

Note the alignment of the copy A tagline highlights your approach compared to the Desired behavior below.

Desired behavior

I'm expecting the page to look like the one on the USWDS documentation.

screen shot 2017-12-07 at 11 23 03

Upvotes: 0

Views: 226

Answers (1)

Herr Josua
Herr Josua

Reputation: 453

With the help of a co-worker I was finally able to resolve the issue. I was missing the bourbon-neat package. Once I installed and added to my scss file the issue was resolved.

Upvotes: 0

Related Questions