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

1
votes

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
2
reactjsexpresswebpackserver-side-renderingless-loader

2 Answers

1
votes

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.