Question

我在Webpack中使用CSS模块时遇到了问题。我尝试使用自定义样式的react-day-picker。当我记录导入的CSS模块以查看类名映射时，我得到undefined。 DayPicker组件未接收任何classNames。我的Webpack加载器配置：

  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"]
      },
      // ...

我尝试导入css模块的方式：

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>
) 
} ;

项目依赖项：

  "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"
  },

据我所知，我正按照https://github.com/webpack-contrib/css-loader中的描述进行导入。谁能看到我做错了什么？

Answer 1

对className尝试这种方式。 Div应该获得profile-component-calendar类样式。

<div className={calendarStyles.profile-component-calendar}>

无法在Webpack中使用CSS模块

1 个答案: