webpack with css-loader - Parsing error: ';' expected

Question

I am starting my first project with React.

To start with, I just have a single component LikeButton.tsx, which is injected into the body. I am trying to apply some styles to this button:

import './LikeButton.css';

LikeButton.css:

button {
    color: red;
}

Here is my webpack.config.ts:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /(node_modules|dist)/,
                use: 'babel-loader'
            }, {
                test: /\.css$/i,
                use: [
                    'style-loader', 'css-loader'
                ]
            }
        ]
    },
    ...
};

When I run webpack, I end up with the following error:

ERROR in src/components/LikeButton.css:1:7
[unknown]: Parsing error: ';' expected.
  > 1 | button {
      |       ^
    2 |     color: red;
    3 | }

The css syntax is correct, so I am guessing the css is being interpreted as javascript/typescript somewhere, but I cannot see where due to the [unknown]-part in the error message.

The loader

What is happening here?

Answer 1

Instead of removing ForkTsCheckerWebpackPlugin which of course you may need for typescript / React combination to work properly, specify the files that you want eslint to check

eslint: {
             files: './src/**/*.{ts,tsx,js,jsx}',
          },

this tells eslint to check javascript and typescript files only, thus removing the css error.