Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS not loaded

See original GitHub issue

Issue description

components: Button
reactstrap version 5.0.0-alpha.4
react version 16.2.0
bootstrap version 4.0.0-beta.3

What is happening?

I am importing the button, I am rendering it, I can see the button but the style is not applied. The css is imported I can see it, but is not applied to the button

I am using it inside electron. My dependencies:

    "animated": "^0.2.0",
    "auto-launch": "^5.0.1",
    "bootstrap": "^4.0.0-beta.3",
    "classnames": "^2.2.5",
    "devtron": "^1.4.0",
    "electron-debug": "^1.2.0",
    "electron-store": "^1.2.0",
    "electron-sudo": "^4.0.12",
    "history": "^4.6.3",
    "lodash": "^4.17.4",
    "mdi": "^2.0.46",
    "prop-types": "^15.5.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-google-maps": "^9.4.5",
    "react-hot-loader": "3.1.3",
    "react-jss": "^7.0.2",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-transition-group": "^2.2.0",
    "reactstrap": "^5.0.0-alpha.4",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-form": "^7.2.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",
    "semantic-ui-flag": "^2.2.11",
    "source-map-support": "^0.5.0",
    "sudo-prompt": "^7.1.1",
    "warning": "^3.0.0",
    "winston": "^2.3.1"

Code:

// @flow
import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Container, Button } from 'reactstrap';

type RootType = {
  store: Object,
  history: Object
};


export default function Root({ store, history }: RootType) {
  return (
    <Container>
      <Button color="primary">primary</Button>

    </Container>
  );
}

Imported css in index.js as: import 'bootstrap/dist/css/bootstrap.css';

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:12 (2 by maintainers)

Top GitHub Comments

18reactions

jalangacommented, Jan 16, 2018

My bad, correct import is: import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

6reactions

oleggalimovcommented, Jul 14, 2018

Thanks, that was helpful. Why import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; is work, but in the official documentation is import 'bootstrap/dist/css/bootstrap.css'; which is not working? The answer is that it’s need a correct loader in webpack.config.js: { test: /\.css$/, loader: 'style-loader!css-loader' },