Unable to use bootstrap.css

[sravikiran]

1. OS?
   Windows 10
2. Versions.
   angular-cli: 1.0.0-beta.11-webpack.2
   node: 6.3.1
   os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   The app is created using angular-cli after I upgraded to the 1.0.0-beta.11-webpack.2 version. After creating the project using ng new command, I installed bootstrap to the application using the following command:

npm install bootstrap --save

I imported the bootstrap.css file in the main.ts file as:

import 'bootstrap/dist/css/bootstrap.css';

When I run the application, I see the file is included in the bundle and the file is loading in the webpack folder in the source tab of developer tools, but the styles are not working on the page. Am I missing anything? I don't think the font files are loaded to the browser. What should I do to load them?

[daftster]

You might need to include the css file in the index.html file.

[sravikiran]

@daftster Purpose of using webpack will become less significant if we do that. Webpack is supposed to load the file as a module and include it in the application bundle file when we build the application for production.

[daftster]

Thanks for the info. Will start playing with webpack. I guess the solution I was suggesting is still with system.config.ts.

[sravikiran]

@daftster Yes, in the systemjs version of angular-cli, we had to include the CSS file from the vendor folder in index.html. As I mentioned in the issue, webpack is including content of the CSS file in the bundle, but looks like the loader has some issue and I think it is not treated like a CSS file.

[SirHenry]

Got the same problem. Using SASS by
import 'bootstrap/scss/bootstrap.scss'
import didn't help either.

Only
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet">
in index.html seems to work, but this is not a solution.

[sravikiran]

@SirHenry Yes, I had tried that too. Surprisingly it processes the SASS files and the converted contents are included in the bundle file in this case too.

[SirHenry]

Could the problem be related to missing
/dist/js/npm in bootstrap 4 alpha3
https://github.com/shakacode/bootstrap-loader/issues/112#issuecomment-235740701
?

[filipesilva]

Closed by #1633 and #1747

[sravikiran]

@filipesilva Thanks for linking the PRs here and for detailing the process of using libraries in the readme. Will look forward to the next version.

[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.}