最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS导入sweetalert-react出错:rotate(45deg) 9; } Unrecognised input

ReactJS crifan 3237浏览 0评论

折腾:

【已解决】ReactJS中如何实现弹框中显示输入框

期间,去试用sweetalert-react,只是导入:

import SweetAlert from ‘sweetalert-react’;

import ‘sweetalert/dist/sweetalert.css’;

结果npm run dev出错:

ERROR in ./~/css-loader?{“sourceMap”:true,”importLoaders”:1}!./~/postcss-loader/lib?{“sourceMap”:true}!./~/less-loader/dist/cjs.js?{“sourceMap”:true}!./~/sweetalert/dist/sweetalert.css

Module build failed:

.sweet-alert .sa-icon.sa-error .sa-line.sa-left {

  -ms-transform: rotate(45deg) \9; }

                             ^

Unrecognised input

      in /Users/crifan/dev/xxx/node_modules/sweetalert/dist/sweetalert.css (line 734, column 31)

@ ./~/sweetalert/dist/sweetalert.css 4:14-163 18:2-22:4 19:20-169

@ ./src/container/estrus/estrus-management/index.js

@ ./src/container/app.js

@ ./src/index.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./index.js

Child html-webpack-plugin for “index.html”:

    chunk    {0} index.html 543 kB [entry] [rendered]

        [0] ./~/lodash/lodash.js 540 kB {0} [built]

        [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.ejs 1.94 kB {0} [built]

        [2] (webpack)/buildin/global.js 509 bytes {0} [built]

        [3] (webpack)/buildin/module.js 517 bytes {0} [built]

webpack: Failed to compile.

react js ms-transform  rotate 45deg Unrecognised input

ParseError: Unrecognised input while using IE7,8,9 “\9” hack when value is in parentheses or in quotes · Issue #2636 · less/less.js

ParseError: Unrecognised input in with « DIV { width: 500px\9 } » · Issue #2207 · less/less.js

去看看源码:

<code>/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-ms-transform: rotate(-45deg) \9; }

/* Success icon */
.sweet-alert .sa-icon.sa-success {
border-color: transparent\9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9; }
</code>

把空格去掉

<code>rotate(45deg) \9;
</code>

变成:

<code>rotate(45deg)\9;
</code>

看看结果:

问题依旧。

去掉\9试试。

然后就正常编译了:

【总结】

此处的less/css的解析器,不支持:

<code>rotate(45deg) \9;
</code>

去掉\9,变成:

<code>rotate(45deg);
</code>

即可:

影响:最多只是不支持IE9之类的。我此处不需要支持IE,所以不是问题。

转载请注明:在路上 » 【已解决】ReactJS导入sweetalert-react出错:rotate(45deg) 9; } Unrecognised input

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.169 seconds, using 22.13MB memory