最新版的vue-cli安装element-ui2时，导入样式文件失败

Question

这个路径应该时没有问题的

Answer 1

路径不是这个吗,你的是element-ui,图上是一大串...

下图是我刚npm 下载的 elementui

Answer 2

通过对比新版的vue-cli和老板的vue-cli的配置文件 发现在build/utils.js中引入了一个新的cssloader：postcssloader(目前还不清楚这个postcssloader(是干啥的)

var postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

然后看到开发和生产的styleLoaders的配置全部都是true，就是默认是启动[cssLoader, postcssLoader]

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },

我本着试一试的想法将此处的usePostCSS: true改为usePostCSS: false发现改完就好了，暂时的解决方案是这样的，还不清楚有什么后遗症，我再查下资料。

Answer 3

你直接引入下载的相对路径css 或者线上的css 这个问题就解决了

Answer 4

错误的原因是引用的路径和真实路径不一致，在main.js中改为这样：import 'element-ui/lib/theme-chalk/index.css'就可以了