Open apurvgandhwani opened 6 years ago
I ejected my create-react-app in order to use css modules. My webpack.config.dev.js looks like this now (below). I have added
{ test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]", }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], },
And this is how I tried using css modules in one of the components
#import React, { Component } from 'react'; import styles from './sidebar.css'; class MenuPanel extends Component { render() { return ( <div> <div className={styles.navbarSide}> <div className="tessact-logo"></div> <div className="navbar-item active"> <a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a> </div>
But my div is not getting {styles.navbarSide}. Inface no className is there in the div when I see in dev tools.
You likely need to run 'npm start' again since you changed your configurations.
I ejected my create-react-app in order to use css modules. My webpack.config.dev.js looks like this now (below). I have added
And this is how I tried using css modules in one of the components
But my div is not getting {styles.navbarSide}. Inface no className is there in the div when I see in dev tools.