Unable to resolve 'css-base' when using 'css-loader' package

[JerJohn15]

I'm trying to replace all inline css files inside a single css file, in order to remove repetitive code. I've downloaded extract-text-webpack-plugin and the required dependencies, configured my environment as described in this and also here, but when I try to compile and run my project, it returns:

Actual Result:

"Module Not Found within the "css-base.js" file inside the "css-loader" node js plugin.

The "css-base" file does exists, when performing a search inside the css-loader package within the "node modules" folder, so the problem must be an issue with discovering it, probably within the webpack.config file.

See related issue

To Do

• [X] Fix "Module not found"for css-base.js
• [X] Fix Link component error (from React-router) that defines a css class inside of the activeStyle component
• [ ] Fix bug so that css styles are correct

[JerJohn15]

Update (from 8-7-16): In the process of trying to resolve this error, I have run into another one, this time with the "activeStyle" attribute within the Link component from React-Router. The reason for this issue, is due to me defining a css className inside the style attribute (React is reading it as a string instead of an object). So

Actual Result:

style  = styles.exchangeBox

should be:

Expected Results

className = styles.exchangeBox

where, "styles" is the name of the imported main.css file, and exchangeBox is the class defined in the css file. If I had defined an ID attribute, I would have to use the appropriate id attribute in the render method.

Update: (from 8-7-16) I think the solution is that I need to call "styles.[classname]" from within the className attribute in React. Since there are some components that already have classes, I need to either change those to other attributes, or try using multiple classes

update: I've tested the above theory on this project, and it works!!!

//adds an additional class to css file

.red {
    font-size: 25px;
    background-color: blue;
    color: white;
}

.textChange {
    font-family: fantasy, cursive;
    color: green;

}

//react code 
import React from 'react'
import CoolButton from '../components/Button/Button'
import styles from '../components/Button/styles.css';

export default class Home extends React.Component {
  render() {
    return (
        <div>
            <h1>Home page</h1>
            <p className = {styles.textChange}>This is a home page</p>//calls the "textChange" class in the css file so that the text changes green.
            <CoolButton text='A super cool button'/>
        </div>
    )
  }
}

Result:

Text body font is now green.

[JerJohn15]

The solution to this is configuring my webpack.config file so that the javascript __dirname + '/src' is javascript path.joins(__dirname + '/src') (see). While this fixes the issue with the css-loader module not being found, I am now running into an issue with getting my css styles to format in the original way in which I had set them.