npm run build时，报错(plugin postcss) Error: expected no more input.

Question

[!] (plugin postcss) Error: expected no more input.
   ╷
11 │ from[data-v-5a151e4f]{
   │     ^
   ╵
  src\components\SvgAnimation\SvgAnimation.vue?vue&type=style&index=0&id=5a151e4f&scoped=true&lang.scss 11:5  root stylesheet     
src\components\SvgAnimation\SvgAnimation.vue?vue&type=style&index=0&id=5a151e4f&scoped=true&lang.scss
Error: expected no more input.

@keyframes circle {
  from{
    stroke-dasharray: 0 1257;
  }
  to{
    stroke-dasharray: 1257 0;
  }
}

老师，请问为什么会出现这种问题呐？项目地址：https://github.com/mingSummer/datav-libs-dev

Answer 1

扬_灵 2021-03-19 15:25:52

同学你好，你可以先把lang="scss"改成css模式，把里面的scss语法改css语法。

• 提问者 Yitea #1

  老师，现在build成功，但是没有动画效果了，无法实现环形进度条
  <style lang="css" scoped>
  .container svg {
      border: 1px solid #000;
  }
  
  .circle {
    animation: circle 5s linear infinite;
    -webkit-animation:circle 5s linear infinite; /* Safari 和 Chrome */
  }
  
  @keyframes circle {
    from{
      stroke-dasharray: 0 1257;
    }
    to{
      stroke-dasharray: 1257 0;
    }
  }
  @-webkit-keyframes circle {
    from{
      stroke-dasharray: 0 1257;
    }
    to{
      stroke-dasharray: 1257 0;
    }
  }
  </style>

• 扬_灵 回复 提问者 Yitea #2

  修改@vue/compiler-sfc版本为 "@vue/compiler-sfc": "3.0.0-beta.18",

• 提问者 Yitea 回复 扬_灵 #3

  问题已解决，谢谢老师！