Can't get CSS modules to work in Webpack - css

Question

I'm having issues getting CSS modules to work in Webpack. I'm trying to use react-day-picker with custom styles. When I log the imported CSS module to see the class name mapping I get undefined. The DayPicker component is not receiving any of the classNames. My Webpack loaders config:
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } },
"sass-loader"
],
exclude: ["node_modules"]
},
// ...
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } }
],
exclude: ["node_modules"]
},
// ...
The way I'm trying to import the css module:
import calendarStyles from './cardCalendar.css';
const Calendar = props => {
console.log("CALENDAR STYLES", calendarStyles);
return(
<div className="profile-component-calendar">
<div className="component-title">Calendar</div>
{props.calendarDropdownConfig.items && (
<CalendarInfoDropdown {...props.calendarDropdownConfig} />
)}
<div id="calendar-card-component" style={someStyle}>
<DayPicker
{...props}
classNames={calendarStyles}
showWeekNumbers
firstDayOfWeek={1}
/>
</div>
</div>
)
} ;
Project dependencies:
"dependencies": {
"#navjobs/upload": "^3.0.7",
"body-parser": "^1.17.2",
"bootstrap": "^3.3.7",
"cfenv": "^1.0.4",
"change-case": "^3.0.1",
"docxtemplater": "^3.1.7",
"dotenv": "^4.0.0",
"dotenv-webpack": "^1.5.4",
"express": "^4.15.4",
"express-session": "^1.15.5",
"file-saver": "^1.3.3",
"helmet": "^3.8.1",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"jszip": "^2.6.1",
"mathjs": "^3.16.3",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"node-sass": "^4.5.3",
"prop-types": "^15.5.10",
"rc-slider": "^8.3.1",
"rc-tooltip": "^3.4.8",
"react": "^16.2.0",
"react-addons-shallow-compare": "^15.6.2",
"react-autocomplete": "^1.7.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-daterangepicker": "^3.4.1",
"react-day-picker": "^7.0.7",
"react-dom": "^16.2.0",
"react-dropzone": "^4.0.0",
"react-images": "^0.5.5",
"react-intl": "^2.3.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-select": "^1.0.0-rc.5",
"react-spinkit": "^3.0.0",
"react-stepzilla": "^4.6.3",
"react-toggle": "^4.0.2",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
"sass-loader": "^6.0.2",
"styled-components": "^2.1.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.25.0",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.28.4",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-prettier": "^2.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-jsx-a11y": "^5.0.1",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"flow-bin": "^0.56.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.3.1",
"immutability-helper": "^2.3.1",
"imports-loader": "^0.7.1",
"jest-cli": "^21.1.0",
"json-loader": "^0.5.7",
"lodash": "^4.17.4",
"loglevel": "^1.4.1",
"morgan": "^1.8.2",
"postcss-loader": "^2.0.6",
"prettier": "^1.5.3",
"prettier-eslint": "^6.4.2",
"ramda": "^0.24.1",
"react-addons-test-utils": "^15.6.0",
"react-content-loader": "^1.4.0",
"react-helmet": "^5.2.0",
"react-hot-loader": "^3.0.0-beta.6",
"react-loadable": "^4.0.5",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"wallaby-webpack": "^0.0.40",
"webpack": "^3.5.4",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.7.1"
},
As far as I can see, I'm doing the import as described in https://github.com/webpack-contrib/css-loader. Can anyone see what I'm doing wrong?

Answer 1

Try this way for className. Div should get profile-component-calendar class style.
<div className={calendarStyles.profile-component-calendar}>