1

I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this: 

import React from "react";
import styles from "./styles.css";

export default class Register extends React.Component {

  render() {
    return (
      <div className={styles.container}>
        <h1> this text should appear to the right </h1>
      </div>
   );
  }
}

And in my styles.css file I have this: 

.container {
    width:40%;
    text-align:right;
}

For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.

If it matters, this is how my "config/webpack/development.js" file looks like:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()
tee
  • 1,286
  • 2
  • 19
  • 35
  • Are you using the ExtractTextPlugin in dev mode (which you shouldn't be) and not including a style tag pointing to the built css file? And what does "isn't having any effect" mean? Do you see the styles in the chrome inspector for that rendered element? – Andy Ray Sep 23 '18 at 19:31
  • @AndyRay when i look in the firefox inspector it shows: `
     – tee Sep 23 '18 at 19:49

2 Answers2

1

It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:

import "./styles.css";
... className="container" ...

Or you can load local styles using following CSS-file syntax:

:local .container {...

Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).

Aprillion
  • 21,510
  • 5
  • 55
  • 89
  • Where can I find the webpack.config.js. In terms of webpack, all i can see is my webpack.yml inside config and the development.js, production.js, environment.js and test.js inside config/webpack. Inside my original question, I added how the development.js looks like – tee Sep 23 '18 at 19:53
  • `webpack.config.js` is explained here: https://webpack.js.org/configuration/ - maybe try searching for `css-loader` in your files to see if you can find where it's configured... if not, read the documentation from the people who configured how to configure your project... – Aprillion Sep 23 '18 at 20:12
  • all modules seem to be automatically set to true in `webpack.config.js` – tee Sep 23 '18 at 21:10
0

seems like you didn't enable an option { modules: true } for css-loader in webpack config

take a look

webpack-contrib/sass-loader#206

https://github.com/webpack-contrib/css-loader#options

Taken from: https://github.com/facebook/create-react-app/issues/1350

Abdullah Ahmed
  • 43
  • 4