My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components.
I have tried various import paths and different files, including using require(path), but nothing seems to work.
src
--modules
----component1
----component2
----asset
---------global.css
--index.js
global.css
.test-class{
font-size: 100px;
color:red;
}
In index.js
import './modules/assets/global.css'
render() {
return (<div className="test-class">Hello World</div>)}
However, when I use styled-components, it works fine.
Below is my webpack configuration:
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
}
}
]
}
]
},
}