Encountered an error while trying to import CSS in a React JS application:
This application functions as a dashboard, with Node.js on the server side and React JS on the client side.
webpack.base.js
module.exports = {
// Configuring Babel for all files
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] } }]
]
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
}
}
style.css
.segment {
border-top:14px solid #14a767;
border-bottom: 3px solid #14a767;
margin: 2px 2px 2px 140px;
width: 80%
}
Home.js (component)
import '../../css/style.css';
return window && document && document.all && !window.atob;
^
ReferenceError: window is not defined