项目场景：

vue 版本：vue 2.6
UI 框架：element UI
编辑器：WebStorm 2020.1.1

已隐藏相关信息

问题描述：

报错如下

./src/views/.../add.vue?vue&type=style&index=0&id=ee902892&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/.../add.vue?vue&type=style&index=0&id=ee902892&scoped=true&lang=css&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js):
Error: Unexpected '!'. Escaping special characters with \ may help.
    at Root._error (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/parser.js:160:16)
    at Root.error (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/selectors/root.js:43:19)
    at Parser.error (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/parser.js:726:21)
    at Parser.unexpected (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/parser.js:744:17)
    at Parser.parse (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/parser.js:1096:14)
    at Parser.loop (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/parser.js:1023:12)
    at new Parser (/Users/hy/Desktop/project/web/wms/project/static/node_modules/postcss-selector-parser/dist/parser.js:150:10)
    at Processor._root (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/processor.js:55:18)
    at Processor._runSync (/Users/hy/Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/processor.js:102:21)
    at Processor.processSync (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss-selector-parser/dist/processor.js:199:23)
    at rewriteSelector (/Users/.../Desktop/project/web/.../project/static/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js:65:12)
    at Root.each (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss/lib/container.js:101:16)
    at /Users/.../Desktop/project/web/.../project/static/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js:16:10
    at LazyResult.run (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.sync (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss/lib/lazy-result.js:281:26)
    at LazyResult.stringify (/Users/.../Desktop/project/web/.../project/static/node_modules/postcss/lib/lazy-result.js:305:10)

原因分析：

问题是Webstorm 中.vue文件提示的css注释有时候格式是<!-- -->

<style scoped>
<!-- 修改el-transfer-panel显示字体不全的问题 -->
  .xxx_transfer >>> .el-transfer-panel{
    width: 300px;
  }
</style>

解决方案：

<style scoped>
  /*  修改el-transfer-panel显示字体不全的问题 */
    .xxx_transfer >>> .el-transfer-panel{
      width: 300px;
    }
</style>