Importing CSS file in React - Webpack / Inline styles

Question

I was assigned a project where I need to stylize an application built with React + Wepback.

When I look at the output in the inspector element, I can see that most elements have a dynamically created class that looks like this: css-18s71b6

Looking at the styles, it's a stylesheet that's imported from a node module... Microsoft Frabric to be exact.

I'm able to add my custom stylesheet so that I can add my className to the elements but the problem I'm having is that my styles are never considered because React's dynamic css rule always has priority.

The only way to overcome this is by putting !important in all my css rules which doesn't make sense.

My guess is that I need to tell React + Webpack to use my stylesheet when compiling the dynamic inline css styles or to disable dynamic classes.

I'm completely new to React + Webpack. I've been working on this for hours, reading and testing but never found any solution. Any input is appreciated.

For what it's worth, my webpack.bable.js file looks like this

module: {
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: options.babelQuery,
    }, {
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, 
    [... more stuff ...]
}

VVV · Accepted Answer · 2018-01-25 16:43:48Z

2

After countless hours, I finally found the answer and am posting it in case other people have the same problem.

The problem is that in the config file, when you include: /node_modules/ it won't include your custom CSS styles. You need a separate loader to accomplish this.

My final webpack config looks like this

    [...] {
      // Preprocess our own .css files
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader'],
    },{
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    } [...]

Notice that the first rule excludes node_modules and the second one includes /node_modules/

For more information on the topic, visit this forum post on Github.

answered Jan 25, 2018 at 16:43

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Victor Zakharov Over a year ago

You can just remove exclude: /node_modules/, for the same effect with 2x less code.

Collectives™ on Stack Overflow

Importing CSS file in React - Webpack / Inline styles

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related