Facing css import issue in create react app in typescript

[ghost]

I am facing css import issue in create react app in typescript

Can u please let me know how I can resolve this issue as I have imported the css into my typescript file as below

import 'suneditor/dist/css/suneditor.min.css';

[JiHong88]

Which version are you using?

[ghost]

[email protected]

[ghost]

I have added the path of the suneditor.min.css in CopyWebpackPlugin in Webpack
as node_modules/suneditor/dist/css/suneditor.min.css
And in
new HtmlWebpackIncludeAssetsPlugin({
assets: [
'css/suneditor.min.css'] })

And use in my typescript file as

import 'suneditor/dist/css/suneditor.min.css';

It works in my dev env but fails in Prod after build as shown in figure above

[JiHong88]

It seems that the web font is not loaded.
You must have a file loader.
Web fonts may not be loaded depending on the environment settings.
The latest version uses "inline svg" rather than a web font.
Please update the editor to the latest version.

[ghost]

ok how do I use font import in CopyWebpackPlugin

[JiHong88]

Sorry, I don't know..😭
I recommend updating the version.

[JiHong88]

I set it like this in my webpack environment.

{
	test: /\.(eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
	use: [{
		loader: "file-loader",
		options: {
			publicPath: '../',
			name: 'fonts/[hash].[ext]',
			limit: 5000,
			mimetype: 'application/font-woff'
		}
	}]
}

Even if the web font is loaded with this setting, it is recommended to use the latest version.

[ghost]

Can u let me know what is the improvement in switching to newer version

[JiHong88]

Please refer to the release history.
https://github.com/JiHong88/SunEditor/releases

[rwaldron]

I was experiencing similar issues, as I have

import 'suneditor/dist/css/suneditor.min.css';

...in my code as well.

Here's what I've learned: in development mode, webpack is just copying the contents of that file and putting it into a <style> element, without interacting with the source. In production mode, webpack will open the source, copy the contents into memory and attempt to minify it with Terser, however there must be a syntax error in 'suneditor/dist/css/suneditor.min.css', because it fails to parse and therefore fails to include it in the final production bundle. There is also evidence that 'suneditor/dist/css/suneditor.min.css' has a syntax error, because my text editor cannot apply css syntax highlighting to it. I will report back if I can find more information.

[rwaldron]

According to csslint.com: Expected RBRACE at line 1, col 30372..

Edit: this may be due to csslint not supporting custom properties.

[rwaldron]

I think both my CSS syntax highlighter, Terser and CSS Lint don't understand the 1turn value here:

@keyframes spinner{
  to {
    transform: rotate(1turn);
  }
}

When I change it to:

@keyframes spinner{
  to {
    transform: rotate(360deg);
  }
}

CSS Lint is happy.

[JiHong88]

@rwaldron Thank for your feedback!
I have checked this issue, and it seems that "cssnano" converts "360deg" to "1turn".

cssnano/cssnano#823
This issue does not seem to be resolved. :(
I will fix this issue by changing "360deg" to "361deg". ea233b7

[JiHong88]

The 2.30.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.