element-ui 如何自行引入，不通过vue-cli搭建

Question

问题描述

自己搭建了一个单文件组件项目，webpack也是自己配的，没有使用vue-cli，可是引入element-ui后，按钮标签被渲染出来啦，但是样式并没有加载出来。

相关代码

• 报错内容：

app.min.js:53704 Uncaught Error: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
@charset "UTF-8";.el-pager,.el-table th{-moz-user-select:none;-ms-user-select:none}.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>,.el-table th.is-hidden>,.el-table--

• 错误截图：

• webpack配置：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = env => {
  if (!env) { env = {} }

  const plugins = [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]



  return {
    mode: env.production,
    entry: {
      app: './main.js'
    },
    resolve: {
      extensions: ['.vue', '.csss', '.js', '.json'], // 可忽略的后缀
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, 'src')
      }
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true, // 开启gzip压缩
      port: 9001
    },
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins,
    output: {
      filename: '[name].min.js',
      path: path.resolve(__dirname, 'dist')
    }

  }
}

请问这个问题该如何解决?

Answer 1

Element的样式是用scss编写的 你需要sass-loader css-loader style-loader