Skip to content
This repository was archived by the owner on Jan 26, 2019. It is now read-only.

css modules not getting applied #235

Open
apurvgandhwani opened this issue Jan 23, 2018 · 1 comment
Open

css modules not getting applied #235

apurvgandhwani opened this issue Jan 23, 2018 · 1 comment

Comments

@apurvgandhwani
Copy link

apurvgandhwani commented Jan 23, 2018

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 apurvgandhwani changed the title scss compiling but not getting applied css modules not getting applied Jan 23, 2018
@tlalokyang
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants