1

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
digz6666
  • 1,798
  • 1
  • 27
  • 37

2 Answers2

1

I figured it out, my app is isomorphic so I need isomorphic loaders. Following is answered my question: How to import CSS file on Isomorphic React - Webpack

I should use https://github.com/catamphetamine/universal-webpack as the https://github.com/catamphetamine/webpack-isomorphic-tools is not maintained anymore.

digz6666
  • 1,798
  • 1
  • 27
  • 37
0

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

digz6666
  • 1,798
  • 1
  • 27
  • 37