React not importing global css; local comp ok - css

Question

React is not loading any global css. All local components are able to get its local styled-components. However, the global css is unable to generated to all components.
I've tried different import paths and tried on different file, also require(path). Not getting anything.
src
--modules
----component1
----component2
----asset
---------global.css
--index.js
global.css
.test-class{
font-size: 100px;
color:red;
}
at index.js
import './modules/assets/global.css'
render() {
return (<div className="test-class">Hello World</div>)}
HOWEVER if i use styledcomponents, it works.
Here's my webpack
module.exports = {
entry: ['babel-polyfill', './src/vendor.js', './src/index.js'],
plugins: [
new HTMLWebpackPlugin({
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: isDev ? '[name].css' : '[name].[hash].css',
chunkFilename: isDev ? '[id].css' : '[id].[hash].css'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.ts[x]?$/,
exclude: /node_modules/,
use: ['babel-loader', 'awesome-typescript-loader']
},
{
test: /\.s?[ac]ss$/,
use: [
'style-loader', // : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: false
}
},
{
loader: 'postcss-loader',
options: {
path: '/postcss.config.js',
sourceMap: true
}
}
]
}
]
},
}

Answer 1

You are trying to get the classes from global.css but you are importing app.css in your index.js file. Import the correct file and you are set.
You are importing it correctly:
import './modules/assets/global.css';
Webpack looks good as well, but if you want to be sure just create a rule only for css since you don't seem to be using any scss or similar:
{test: /\.css$/, loader: 'style-loader'},
{
test: /\.css$/,
loader: 'css-loader',
options: {
importLoaders: 1,
modules: false
}
},