create-react-app-typescript icon indicating copy to clipboard operation
create-react-app-typescript copied to clipboard

css modules not getting applied

Open apurvgandhwani opened this issue 7 years ago • 1 comments

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.

apurvgandhwani avatar Jan 23 '18 06:01 apurvgandhwani

You likely need to run 'npm start' again since you changed your configurations.

sunyae2 avatar Sep 19 '18 19:09 sunyae2