vue ssr 在main.js中引用 .css 无法正常打包？

Question

错误情景

• 不使用nuxt.js的情况下，vue 手动搭建服务器端(node)渲染（ssr）引用element-ui的.css文件时报错？

我的环境

• node v10.13.0
• npm v6.9.0
• vue-cli v2.9.6
• Windows 10（第一次测试未在linux'服务器上进行）

相关代码

14、// 在main.js中引入element
15、import ElementUI from 'element-ui'
16、import 'element-ui/lib/theme-chalk/index.css'
17、Vue.use(ElementUI);

报错信息如下

......vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-header{padding:0 20px;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-aside,.el-main{o
verflow:auto;-webkit-box-sizing:border-box}.el-aside{box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-main{display:block;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-
size:auto;flex-basis:auto;box-sizing:border-box;padding:20px}.el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}
 @ ./src/main.js 16:0-46
 @ ./src/entry-server.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! facilities@1.0.0 build:server: `cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the facilities@1.0.0 build:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

其中错误提示./src/main.js 16:0-46的代码如下

import 'element-ui/lib/theme-chalk/index.css'

当我注释掉此行的时候就可以正常打包了，由此判断是 这种.css的引入方式在node端并不支持，

求助

• 本人是后端开发，对前端还不是太熟悉，希望可以得到各位大佬的指点如何正确的引入.css文件，或者通过其他方式正常引入elementUI
• 如承蒙各位指点，在下唯有感激涕零，不胜感激~！
• 另附一份webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}


var webpack=require('webpack');
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/entry-client.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
//  plugins: [ 
//            new webpack.ProvidePlugin({ 
//                  $:"jquery", 
//                  jQuery:"jquery", 
//                 WebVideoCtrl:"WebVideoCtrl"
//         }) 
//  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
      // 'jquery':resolve('static/jquery-1.7.1.min.js'),
      // 'WebVideoCtrl':resolve('static/webVideoCtrl.js')
    }
  },
  
  module: {
    rules: [
      
      {
        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: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.less/,
          loader: 'style-loader!css-loader!less-loader'
        }
    ]
  },
  devServer: {
    disableHostCheck: true,
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

Answer 1

是否在服务端配置这个呢？

我确认了一下，服务器是不能编译css的

Answer 2

请问解决这个问题了么，我是新手，正在旧项目翻新。卡这了

Answer 3

用2.4.6版本的elementui即可