Asked  10 Months ago    Answers:  5   Viewed   192 times

I am using webpack 2 and react-bootstrap in my project ; I can't find how to have bootstrap CSS styles properly applied it seems like the .css file is not loaded, no matter which import statement I tried to use.

As far as I understand I do not need the full bootstrap package with javascript etc. since I am using react-bootstrap ; I just need the CSS. So I added this in my main.js file:

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

It seems to work (no error message) but the styles are not applied...

I configured the css loader in my webpack config file as described on webpack 2 documentation.

Any help would be appreciated :)

 Answers

5

When setting modules: true in the css-loader, the CSS is locally scoped by default, but you need them to be available globally. The simplest solution is to remove modules: true entirely. You could still use modules in your own CSS files by using :local.

But if you would like to use modules, there are some workarounds to import globals.

Defining separate rules

Instead of enabling modules for all the CSS files, you can make two different rules, that match the desired files. So let's say all CSS imports from node_modules should be treated as regular (global) CSS. The rules would look like this:

{
  // For all .css files except from node_modules
  test: /.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
},
{
  // For all .css files in node_modules
  test: /.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}

Of course you can be more specific in what you want to include/exclude, if you don't want the entire node_modules.

Specifying loaders inline

You can specify the loaders in the import and webpack will use those over the configured ones. You would import bootstrap as follows:

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

This is just a quick workaround without having to change any config, but it's probably not desirable, especially when having multiple such cases.

Wednesday, August 4, 2021
 
4

While browsing Bootstrap 4 documentation. I actually found a section about Webpack which explains how to install it correctly. Following the Bootstrap - installing with Webpack documentation, the answer is to simply modify the webpack.config.js with the following:

plugins: [
  // ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
  // ...
]

and let's not forget to import it in the main.ts

import 'bootstrap';

and voilĂ ! We are back in business :)

Monday, August 9, 2021
 
Nickool
 
5

How are you compiling this? If it's webpack, you'd probably need to bring in the style-loader and include something like this in the module.loaders array in your webpack config:

{
  test: /.css$/,
  loader: "style!css"
}

Update: With the webpack.config.js now provided, we can confirm it needed a change in the module.loaders array. OP was using a less loader and only checking for .less files, so the exact loader object should read:

{
  test: /.(less|css)$/,
  loader: 'style!css!less'
}

As suggested by @Q Liu. Leaving the original bit as if someone comes here with an error importing a .css file, it's likely what they need.

Sunday, August 15, 2021
 
Strae
 
4

I'm going to assume that you're not building Bootstrap with the LESS or SASS code base and are downloading the whole library pre-built. If so, go to Bootstrap's customize page and uncheck any components that you don't want, i.e. Glyphicons, then download the new source.

A lot of the online font library tools, I like to use Fontello myself, will allow you to select just the icons you want and create an icon font from that. Not only do they create the icon font but will also provide the CSS to include the font into your project, it will look something like this:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "2a"; } }
.glyphicon-plus                   { &:before { content: "2b"; } }
/* ... more icons ... */
/* ... more icons ... */
/* ... more icons ... */
.glyphicon-menu-down              { &:before { content: "e259"; } }
.glyphicon-menu-up                { &:before { content: "e260"; } }

Now simply include the font CSS into your main CSS stylesheet. If you have any additional questions about including/embedding an icon font I would Google "How to include font icon".

Friday, October 15, 2021
 
1

Here's how i did it entirely in the front end react side:

  1. Include font awesome inside the <head> tag

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
  2. Install react-fontawesome

    npm install --save react-fontawesome

  3. Import the file and use it in your react components

    import FontAwesome from 'react-fontawesome';
    
    // ..rest of your code
    <FontAwesome name="linkedin" size="2x"/>
    
Saturday, January 8, 2022
 
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :