最新版的vue-cli安裝element-ui2時，導(dǎo)入樣式文件失敗

路徑不是這個嗎,你的是element-ui,圖上是一大串...

下圖是我剛npm 下載的 elementui

你直接引入下載的相對路徑css 或者線上的css 這個問題就解決了

通過對比新版的vue-cli和老板的vue-cli的配置文件 發(fā)現(xiàn)在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
        })
      })
    }

然后看到開發(fā)和生產(chǎn)的styleLoaders的配置全部都是true，就是默認(rèn)是啟動[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發(fā)現(xiàn)改完就好了，暫時的解決方案是這樣的，還不清楚有什么后遺癥，我再查下資料。

錯誤的原因是引用的路徑和真實路徑不一致，在main.js中改為這樣：import 'element-ui/lib/theme-chalk/index.css'就可以了