Vue-cli webpack packaging loader error

here are some error messages

ERROR in ./node_modules/mavon-editor/dist/css/index.css 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @font-face{font-family:fontello;src:url(../font/fontello.eot);src:url(../font/fontello.eot-sharpiefix) format("embedded-opent
ype"),url(../font/fontello.woff2) format("woff2"),url(../font/fontello.woff) format("woff"),url(../font/fontello.ttf) form
at("truetype"),url(../font/fontello.svg-sharpfontello) format("svg");font-weight:400;font-style:normal}[class*=" fa-mavon-"]:be
fore,[class^=fa-mavon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text
-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;
margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-mavon-bold:before{content:"\E800
"}.fa-mavon-italic:before{content:"\E801"}.fa-mavon-thumb-tack:before{content:"\E802"}.fa-mavon-link:before{content:"\E803
"}.fa-mavon-picture-o:before{content:"\E804"}.fa-mavon-repeat:before{content:"\E805"}.fa-mavon-undo:before{content:"\E806"
}.fa-mavon-trash-o:before{content:"\E807"}.fa-mavon-floppy-o:before{content:"\E808"}.fa-mavon-compress:before{content:"\E8
09"}.fa-mavon-eye:before{content:"\E80A"}.fa-mavon-eye-slash:before{content:"\E80B"}.fa-mavon-question-circle:before{conte
nt:"\E80C"}.fa-mavon-times:before{content:"\E80D"}.fa-mavon-align-left:before{content:"\E80F"}.fa-mavon-align-center:befor
e{content:"\E810"}.fa-mavon-align-right:before{content:"\E811"}.fa-mavon-arrows-alt:before{content:"\F0B2"}.fa-mavon-bars:
before{content:"\F0C9"}.fa-mavon-list-ul:before{content:"\F0CA"}.fa-mavon-list-ol:before{content:"\F0CB"}.fa-mavon-striket
hrough:before{content:"\F0CC"}.fa-mavon-underline:before{content:"\F0CD"}.fa-mavon-table:before{content:"\F0CE"}.fa-mavon-
columns:before{content:"\F0DB"}.fa-mavon-quote-left:before{content:"\F10D"}.fa-mavon-code:before{content:"\F121"}.fa-mavon
-superscript:before{content:"\F12B"}.fa-mavon-subscript:before{content:"\F12C"}.fa-mavon-header:before{content:"\F1DC"}.fa
-mavon-window-maximize:before{content:"\F2D0"}.markdown-body strong{font-weight:bolder}.markdown-body .hljs-center{text-al
ign:center}.markdown-body .hljs-right{text-align:right}.markdown-body .hljs-left{text-align:left}
 @ ./src/main.js 7:0-41

ERROR in ./src/components/selfLife/selfLife.vue?vue&type=style&index=0&id=eadd5e8e&scoped=true&lang=css& (./node_modules/v
ue-loader/lib??vue-loader-options!./src/components/selfLife/selfLife.vue?vue&type=style&index=0&id=eadd5e8e&scoped=true&la
ng=css&) 105:0
Module parse failed: Unexpected token (105:0)
You may need an appropriate loader to handle this file type.
|
|
> .add-henji-title {
|   margin-bottom: 10px;
| }
 @ ./src/components/selfLife/selfLife.vue?vue&type=style&index=0&id=eadd5e8e&scoped=true&lang=css& 1:0-158 1:174-177 1:179
-334 1:179-334
 @ ./src/components/selfLife/selfLife.vue
 @ ./src/router/index.js
 @ ./src/main.js

the following is the configuration of rules in webpack.base.conf.js:

rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },
      {
        test: /\\.css$/,
        loader: "style-loader!css-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("css/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("media/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        // test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "file-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }
Menu