CSS 模块是否可用于使用 React 的 excel 插件？

Question

我使用 Yeoman 办公室生成器创建了一个 reactjs 项目。我试图将组件和样式文件放在一起。 css 模块是否可用于此类项目？以下是我的代码：

import * as React from "react";
import classes from "./Header.module.css"
const Header = (props) => {
  return <header className={classes["header-main"]}>...</header>;
};

export default Header;

对于这种情况，我的 Header.module.css 与 Header.js 文件位于同一文件夹中。但是我的 Header.module.css 文件似乎对我的组件没有任何影响。

我的包裹中是否缺少某些东西？下面是我的 package.json 文件。

{
  "name": "office-addin-taskpane-react-js",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React-JS.git"
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "excel",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "scripts": {
    "build": "webpack -p --mode production --https false",
    "build:dev": "webpack --mode development --https false",
    "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
    "dev-server": "webpack-dev-server --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@fluentui/react": "^8.16.0",
    "core-js": "^3.9.1",
    "es6-promise": "^4.2.8",
    "office-ui-fabric-react": "^7.10.0",
    "react": "^16.8.2",
    "react-dom": "^16.10.2",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@types/es6-collections": "^0.5.29",
    "@types/find-process": "1.2.0",
    "@types/office-js": "^1.0.180",
    "@types/office-runtime": "^1.0.17",
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "@types/react-hot-loader": "^4.1.0",
    "@types/webpack": "^4.4.34",
    "@types/webpack-dev-server": "^3.1.6",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^5.2.4",
    "eslint": "^7.20.0",
    "eslint-plugin-office-addins": "^1.0.0",
    "eslint-plugin-react": "^7.16.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "find-process": "^1.4.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "office-addin-cli": "^1.2.2",
    "office-addin-debugging": "^4.2.2",
    "office-addin-dev-certs": "^1.6.2",
    "office-addin-lint": "^1.3.2",
    "office-addin-manifest": "^1.6.2",
    "office-addin-prettier-config": "^1.1.0",
    "postcss-loader": "^4.0.0",
    "react-hot-loader": "^4.12.6",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.2.2",
    "typescript": "^4.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "prettier": "office-addin-prettier-config"
}

感谢任何见解。

Answer 1

在您的 className 中，您将字符串假装为对象..您可以用它替换。

return <header className={classes.header-main}>...</header>;

你的module.css文件中的大多数情况最好将它命名为camelCase，例如“.headerMain”