CSS not loaded

[jalanga]

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';

[jalanga]

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

[oleggalimov]

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' },

[flavioribeiro]

pretty helpful thanks @jalanga

[donenam]

Actually helped me after much pundering

[youngheart12]

./src/index.js
Line 3: Unexpected '!' in '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

Search for the keywords to learn more about each error.

i am getting this error while importing .how to fix this .

[TheSharpieOne]

@youngheart12 See https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md

[donenam]

Are you using react js?  Sent from Yahoo Mail on Android On Fri, Feb 22, 2019 at 2:10 PM, Dilip Kumar<notifications@github.com> wrote: ./src/index.js Line 3: Unexpected '!' in '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax Search for the keywords to learn more about each error. i am getting this error while importing .how to fix this . — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[donenam]

I fixed my css issues with a code..in the package json file..  Am not with my pc now.  I will forward it later if you need.  Sent from Yahoo Mail on Android On Sat, Feb 23, 2019 at 2:31 AM, Chinonson Enam Ibeh<enamibeh@yahoo.com> wrote: Are you using react js?  Sent from Yahoo Mail on Android On Fri, Feb 22, 2019 at 2:10 PM, Dilip Kumar<notifications@github.com> wrote: ./src/index.js Line 3: Unexpected '!' in '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax Search for the keywords to learn more about each error. i am getting this error while importing .how to fix this . — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[drindc24]

Having same issues as @youngheart12 , am a beginner in react and the accepted answered above is using an old config file from webpack

[TheSharpieOne]

There is nothing special or reactstrap specific for importing CSS (such as bootstrap's CSS).
The easiest way is to just link to the CSS hosted on a CDN as recommended by bootstrap: https://getbootstrap.com/docs/4.3/getting-started/introduction/#css
If you want to require/import CSS, then you need to have your build tool handle .css (or even .scss/.sass) files, else it will not know what to do with the file and probably assume that it is javascript (and blow up since CSS is not JavaScript).
In webpack, a loader (or a few loaders) are needed. You can find out more about webpack loaders and loading CSS via webpack on webpack's documentation site: Loaders and css-loader
Using something like CRA will preconfigure your webpack in a common/opinionated way. It supports loading CSS out of the box.

The issue that @youngheart12 and @drindc24 are running into is that they have a project which specific forbids using inline loaders. An inline loader is a modification to the import statement to make the import be a non-standard import. It adds which loader you want to use when loading the file to the file name string.
For instance this is a legit import which many systems understand:

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

this is a webpack specific import which webpack understands

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

The problem with the webpack specific import is that you are coupling your imports to a specific build tool (which is considered bad practice).
Because of this, an eslint rule was created to find webpack specific import instances and throw an error. This eslint rule is in @youngheart12 and @drindc24 project, they can disable it to allow them to do the inline imports OR they can add the imports to their webpack configuration (see css-loader).

[mkotsollaris]

import 'bootstrap/dist/css/bootstrap.css'; did for me.

Example:

import React from 'react';
import {
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.css';

export default class MyCustomDropdown extends React.Component {

    toggle = () => {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen
        }));
    }

    render() {
        return <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle caret>Dropdown</DropdownToggle>
            <DropdownMenu>
                <DropdownItem>Foo Action</DropdownItem>
                <DropdownItem>Bar Action</DropdownItem>
                <DropdownItem>Quo Action</DropdownItem>
            </DropdownMenu>
        </Dropdown>;
    }
}

[fulin426]

@mkalish For some reason when I ran a build the CSS was loss. I decided to import the bootrap css to my top level app component. Thanks this helped!