Unable to watch the changes on the source CSS file once imported

[fengyuanchen]

Works fine for one time build, but not local dev server (e.g., the development mode of Webpack).

[unlight]

Looks like it's common problem of some other babel plugins.

babel/babel#11741

@fengyuanchen
Do you use webpack/babel-loader? Have you tried BABEL_DISABLE_CACHE=1?

[fengyuanchen]

I use this plugin in a TypeScript project:

module: {
  rules: [
    {
      test: /\.ts$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            plugins: [
              [
                'postcss',
                {
                  test: /\.css$/,
                  postcss: true,
                },
              ],
            ],
          },
        },
        {
          loader: 'ts-loader',
        },
      ],
    }
  ]
}

[fengyuanchen]

I see, it seems the ts-loader doesn't support Hot Module replacement.

[unlight]

How is related ts-loader and babel-plugin?

[fengyuanchen]

Just see the config segment of Webpack's module I had provided.

[fengyuanchen]

I import a css file into a ts file in my project:

// index.ts
import utils from 'utils.ts';
import style from 'index.css';

[unlight]

@fengyuanchen
Have you tried https://github.com/amitsingh-007/webpack-watch-external-files-plugin ?

[unlight]

It does not work for me.