React can't be applied by global CSS - reactjs

Question

I am modifying a forum software at here
After installing "npm install -S react-draft-wysiwyg" on that forum project, I tried to apply global css by putting "import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';" at the top of some React component js file in that forum software.
But it looks like something is blocking global CSS. CSS in that import didn't affect React js file. But I do not know what is blocking global css. My only guess is could be somewhat related to webpack but not sure.
I tried making a new react project by "npx create-react-app" and applied that global css, and it worked there. So I concluded that something is blocking global css in that forum project so that global CSS implementation doesn't work in that forum software only.
Here is package.json that forum software uses:
{
"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"
}
}
Can you please tell me what is blocking global CSS implementation?
Thank you very much.

Answer 1

You are using css-loader in webpack. So normal css will be compiled to another name such as
localIdentName: "[local]___[hash:base64:5]"
You can write your css with global such as
:global(.myclass) {
background-color: red;
}
or you can disable module in your webpack config
{
loader: "css-loader",
options: {
modules: false,
}
},