Twitter Bootstrap Question posted in

angular.io bootstrap integration – Twitter bootstrap

I am no longer able to apply twitter bootstrap via .angular-cli.json to a vanilla angular build generated by the angular cli. This used to work just fine, but after upgrading to the latest version of node and angular cli and git bash, I am no longer able to do so.

Incidentally, any changes I make to the styles.css in the src directory are not being applied either. Have I overlooked anything, perhaps?

Tech Details
os: Windows 10
node: v6.11.2
@angular/cli: 1.2.7
git: 2.13.3
bootstrap: ^3.3.7

Steps

Using git bash
1. ng new abc
2. cd abc
3. npm install –save bootstrap
4. edit styles in .angular-cli.json
"styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]
5. ng serve
6. navigate to http://localhost:4200

Angular cli message
WARNING in C:/Users/fisk/Documents/code/abc/~/@angular/compiler/@angular/compiler.es5.js
(Emitted value instead of an instance of Error) Cannot find source file 'compiler.es5.ts': Error: Can't resolve './compiler.es5.ts' in 'C:UsersfiskDocuments codeabcnode_modules@angularcompiler@angular'
@ C:/Users/fisk/Documents/code/abc/~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 7:0-72
@ C:/Users/fisk/Documents/code/abc/src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Compiled with warnings.

Screenshot Link
No styles being applied
http://i.imgur.com/Yo58c4L.png

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    First of all, thank you for all the replies and suggestions.

    In short

    • Styles.css and bootstrap styles are imported correctly if the angular project was generated via cmd prompt
    • Styles.css and the bootstrap styles have no effect if the angular project was generated using git bash, which is what I was using.

    I was able to replicate the same symptoms on two separate machines, Windows 10 and Windows 7.


  2. 0

    Please do these steps:
    npm install bootstrap-sass ng2-bootstrap –save
    Update The angular cli json file
    “styles”: [
    “style.scss”,
    “../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss
    ],

    Login or Signup to reply.
  3. 0

    angular uses webpack. add your css in the style section of webpack.config.js. there may be a src/style.css file in which you can import it too.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search