Unable to import (require) css, less, sass file on react component when using express server

Question

I'm importing less or css file to my react component and it is working fine on my following example project: https://github.com/digz6666/webpack-loader-test

But when I use express server to implement SSR I no longer can import less file to my react component. It is only working on index.js entry file. It throws following exception:

[1] Error: Module parse failed: Unexpected token (2:0)
[1] You may need an appropriate loader to handle this file type.
[1] | // @import '~antd/dist/antd.css';
[1] > .trigger {
[1] |   font-size: 18px;
[1] |   line-height: 64px;
[1]     at eval (webpack:///./src/client/layout/baseLayout.less?:1:7)

Here's the example project that I use SSR: https://github.com/digz6666/webpack-loader-test/tree/ssr

Please uncomment styles in following file, npm install and npm start to test:

/src/client/layout/baseLayout.less

Answer 1

I've used https://github.com/kriasoft/isomorphic-style-loader because its easier to configure. Also I've added the code here: https://github.com/digz6666/webpack-loader-test/tree/ssr-2