React 不能被全局 CSS 应用答案

【问题标题】：React can't be applied by global CSSReact 不能被全局 CSS 应用
【发布时间】：2019-11-29 10:33:03
【问题描述】：

我在here修改一个论坛软件

在该论坛项目上安装“npm install -S react-draft-wysiwyg”后，我尝试通过输入“import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';”来应用全局 css在该论坛软件中某个 React 组件 js 文件的顶部。

但看起来有些东西阻止了全局 CSS。该导入中的 CSS 不会影响 React js 文件。但我不知道是什么阻塞了全局 css。我唯一的猜测是可能与 webpack 有点相关，但不确定。

我尝试通过“npx create-react-app”创建一个新的 react 项目并应用该全局 css，它在那里工作。所以我得出结论，该论坛项目中的某些东西阻止了全局 CSS，因此全局 CSS 实现仅在该论坛软件中不起作用。

这里是论坛软件使用的package.json：

{
  "name": "reforum",
  "version": "1.0.0",
  "description": "A forum application built with ReactJS, Redux, Express and MongoDB",
  "license": "MIT",
  "keywords": [
    "forum",
    "react",
    "redux",
    "express",
    "mongodb"
  ],
  "main": "server.js",
  "engines": {
    "node": "7.1.0"
  },
  "scripts": {
    "test": "jest",
    "start": "better-npm-run start",
    "start:dev": "better-npm-run start:dev",
    "build": "webpack --config config/webpack.prod.config.js"
  },
  "betterScripts": {
    "start": {
      "command": "node server.js",
      "env": {
        "NODE_ENV": "production",
        "PORT": 3030
      }
    },
    "start:dev": {
      "command": "node server.js",
      "env": {
        "NODE_ENV": "development",
        "PORT": 8080
      }
    }
  },
  "dependencies": {
    "better-npm-run": "^0.0.13",
    "body-parser": "^1.15.2",
    "compression": "^1.6.2",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^1.3.2",
    "cookie-parser": "^1.4.3",
    "express": "^4.14.0",
    "express-session": "^1.14.2",
    "help": "^3.0.2",
    "lodash": "^4.17.4",
    "mongoose": "^4.7.4",
    "morgan": "^1.7.0",
    "passport": "^0.3.2",
    "passport-github": "^1.1.0",
    "passport-local": "^1.0.0"
  },
  "devDependencies": {
    "async": "^2.1.5",
    "autoprefixer": "^6.6.1",
    "axios": "^0.15.3",
    "babel": "^6.5.2",
    "babel-core": "^6.20.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "classnames": "^2.2.5",
    "css-loader": "^0.26.1",
    "draft-js": "^0.10.0",
    "eslint": "^3.12.1",
    "eslint-plugin-react": "^6.8.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "jest": "^20.0.4",
    "moment": "^2.17.1",
    "nock": "^9.0.13",
    "postcss-loader": "^1.2.2",
    "postcss-nesting": "^2.3.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-helmet": "^5.0.3",
    "react-hot-loader": "^1.3.1",
    "react-onclickoutside": "^5.10.0",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.0",
    "redux": "^3.6.0",
    "redux-mock-store": "^1.2.3",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-hot-middleware": "^2.13.2"
  }
}

您能告诉我是什么阻碍了全局 CSS 实现吗？非常感谢。

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

你在 webpack 中使用 css-loader。所以普通的css会被编译成另外一个名字，比如 localIdentName: "[local]___[hash:base64:5]"

你可以用global写你的css比如

:global(.myclass) {
  background-color: red;
}

或者你可以在你的 webpack 配置中禁用模块

 {
            loader: "css-loader",
            options: {
              modules: false,
            }
 },

【讨论】：