Rmwc: React CSS Modules break rmwc styling

[alecchisi]

What RMWC Version are you using?

1.0.2

What browser(s) and React Version is this bug affecting?

Chrome (latest) Firefox (latest) React 16.2.0

What build system are you using?

Create React App (1.5.1)

What are the steps to reproduce the bug?

• $ create-react-app someapp
• $ npm run eject
• edit webpack.config.dev.js and webpack.config.prod.js and add

modules: true, localIdentName: '[name]_[local]_[hash:base64:5]'

to the css loader options and enable CSS Modules

• $npm install --save rmwc
• Edit index.js and add

import'material-components-web/dist/material-components-web.min.css'

• add some rmwc component in App.js:

import React, { Component } from 'react';
import { Button } from 'rmwc'

class App extends Component {
    render() {
        return (
            <div>
                <Button>Hello World</Button>
            </div>
        );
    }
}

What is the expected behavior?

Default rmwc style should be applied

What is the actual behavior?

No style is applied, just the raw component is displayed

[jamesmfriedman]

If you're using css modules, you need to load material-components-web as an unmodified global css file. The easiest way to accomplish this is to have two CSS loaders. This is a well documented issue in general when using CSS modules with 3rd party stylesheets.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: './node_modules/material-components-web',
        use: [ 'style-loader', 'css-loader?modules=true' ]
      },
      {
        test: /\.css$/,
        include: './node_modules/material-components-web',
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

[alecchisi]

Thank you james, that was really useful!

[alecchisi]

I found that in my webpack version the relative path should be resolved with path.resolve node
function:

{
  test: /\.css$/,
  include: path.resolve('./node_modules/material-components-web'),
  use: [ 'style-loader', 'css-loader' ]
},
{
  test: /\.css$/,
  exclude: path.resolve('./node_modules/material-components-web'),
  use: [ 'style-loader', 'css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]']
},

webpack.config.dev.js and webpack.config.prod.js were generated by create-react-app

[jamesmfriedman]

Thats correct, I can put that in the documentation but unfortunately the path is going to be specific for each individual setup. I know that no matter what I put in there someone is going to copy and paste it and say it's not working :/

Is there a reason you re-opened the issue? It sounds like that fix is working for you.

[alecchisi]

@jamesmfriedman yes, that worked, It was purely a push-button mistake :) I'm closing it