Troubleshooting in Vue2 Element UI with Webpack4

Error 1.

ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

Solution 1.

$ yarn add -D style-loader

  module: {
    rules: [
      ...
      {
        test: /\.(sa|sc|c)ss$/,
        include: [
          path.resolve('src'),
          path.resolve('node_modules/element-ui/'), <-- If you use webpack include rule, add this.
        ],
        use: [
          'vue-style-loader',
          'style-loader',  <-- Add this.
          'css-loader',
        ],
      },
      ...
    ],
  },

Error 2.

ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
...
...
...
ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.

Solution 2.

$ yarn add -D file-loader

  module: {
    rules: [
      ...
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.+)?$/, <-- Add this.
        include: [
          path.resolve('src'),
          path.resolve('node_modules/element-ui/'), <-- If you use webpack include rule, add this.
        ],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
      ...
    ],
  },