electron-webpack doesn't recognize my loader

* **Version**: v13.1.1

* **Target**: windows 10

I created the settings file electron-webpack.json and webpack.renderer.additions.js as below but when I run electron-webpack dev I still get the error below. What am I missing?

the error:

> ERROR in ./src/App.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

**electron-webpack.json**

```
{
"title": true,
"main": {
"sourceDirectory": "src"
},
"renderer": {
"sourceDirectory": "src",
"template": "public/index.html",
"webpackConfig": "webpack.renderer.additions.js"
},
"commonSourceDirectory": "common",
"staticSourceDirectory": "static"
}
```

**webpack.renderer.additions.js**

```
const webpack = require("webpack");
const path = require('path');

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'bundle.js'
},
plugins: [
new webpack.ExternalsPlugin('commonjs', [
'electron'
])
],
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
//{ test: /\.ts$/, use: 'ts-loader' },
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
],
}
}
```

**UPDATE 1**

Now I'm using an export function like below, it's easiert to debug, I guess. Here's the export function I'm using:

```
module.exports = function(config) {

//console.log(JSON.stringify(config, null, 4))

const styleRules = config.module.rules.filter(rule =>
rule.test.toString().match(/css|less|s\(\[ac\]\)ss/)
)

styleRules.forEach(rule => {

console.log('rule = ', rule)
})

return config
}
```

the output is:

> $ electron-webpack dev
> ┏ Renderer -------------------
>
> AttachConsole failed with error 6: Identificador inv�lido.
>
> ┗ ----------------------------
> ┏ Main -----------------------
>
> Hash: 3846d72932ec0ff8a5df
> Version: webpack 4.44.2
> Time: 764ms
> Built at: 20/01/2022 15:08:18
> Asset Size Chunks Chunk Names
> main.js 84.8 KiB main main
> Entrypoint main = main.js
> [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js 40 bytes {main} [built]
> [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 582 bytes {main} [built]
> [./node_modules/react-tabs/style/react-tabs.css] 296 bytes {main} [built] [failed] [1 error]
> [./src/App.css] 279 bytes {main} [built] [failed] [1 error]
> [./src/App.js] 3.56 KiB {main} [built]
> [./src/EditorLoaderComponent.js] 1.69 KiB {main} [built]
> [./src/MicroFrontend.js] 1.06 KiB {main} [built]
> [./src/PropertyGridComponent.js] 266 bytes {main} [built]
> [./src/index.css] 338 bytes {main} [built] [failed] [1 error]
> [./src/index.js] 542 bytes {main} [built]
> [./src/reportWebVitals.js] 395 bytes {main} [built]
> [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
> [react] external "react" 42 bytes {main} [built]
> [react-dom] external "react-dom" 42 bytes {main} [built]
> [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]
> + 8 hidden modules
>
> ERROR in ./src/App.css 1:0
> Module parse failed: Unexpected token (1:0)
> You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> > .home {
> | margin-top: 10px;
> | width: 100%;
> @ ./src/App.js 12:0-19
> @ ./src/index.js
> @ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js
>
> ERROR in ./node_modules/react-tabs/style/react-tabs.css 1:0
> Module parse failed: Unexpected token (1:0)
> You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> > .react-tabs {
> | -webkit-tap-highlight-color: transparent;
> | }
> @ ./src/App.js 11:0-41
> @ ./src/index.js
> @ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js
>
> ERROR in ./src/index.css 1:5
> Module parse failed: Unexpected token (1:5)
> You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> > body {
> | margin: 0;
> | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
> @ ./src/index.js 3:0-21
> @ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js
>
> ┗ ----------------------------
> ┏ Renderer -------------------
>
> rule = {
> test: /\.css$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] }
> ]
> }
>
> ┗ ----------------------------
> ┏ Renderer -------------------
>
> rule = {
> test: /\.less$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] },
> 'less-loader'
> ]
> }
> rule = {
> test: /\.s([ac])ss$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] },
> 'sass-loader'
> ]
> }
>
> ┗ ----------------------------
> ┏ Renderer -------------------
>
> i ｢wds｣: Project is running at http://localhost:53693/
>
> ┗ ----------------------------
> ┏ Renderer -------------------
>
> i ｢wds｣: webpack output is served from /
> i ｢wds｣: Content not from webpack is served from C:\Users\jack\Desktop\merge\Newton\static, C:\Users\jack\Desktop\merge\Newton\dist\renderer-dll
>
> ┗ ----------------------------
> ┏ Renderer -------------------
> [...]

So out this I can see there are some css rules and the associated module of it like:

> rule = {
> test: /\.css$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] }
> ]
> }
>
> ┗ ----------------------------
> ┏ Renderer -------------------
>
> rule = {
> test: /\.less$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] },
> 'less-loader'
> ]
> }
> rule = {
> test: /\.s([ac])ss$/,
> use: [
> 'css-hot-loader',
> 'C:\\Users\\jack\\Desktop\\merge\\Newton\\node_modules\\electron-webpack\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
> { loader: 'css-loader', options: [Object] },
> 'sass-loader'
> ]
> }
>

but I still getting the css load error. What am I missing?

**UPDATE 2:**

I've tried define the export function as the below but I still get same error:

```
module.exports = function(config) {

config.module.rules.push(
{ test: /\.css$/, use: 'css-loader' }
)

return config
}
```