Webpack: import css in main.js caught error

[keepfool]

I just worked on the latest webpack template, the vue-loader version is 11.1.4.
I want to use post css in my applicaiton, but I face a problem when importing css in main.js.

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import routes from './route-config'
import './themes/index.css'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  ...App
})

I changed the webpack.base.conf.js, add the following configuration to use postcss:

{
  test: /\.css$/,
  use: [
    'style-loader', {
      loader: 'css-loader',
      options: {
        minimize: false,
        sourceMap: false
      }
    }, {
      loader: 'postcss-loader',
      options: {
        postcss: [
          require('precss')
        ]
      }
    }
  ]
}

vue-loader.config.js is also changed:

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('precss')
  ]
}

The error is:

This relative module was not found:

* ./themes/index.css in ./src/main.js

I am quiet sure the index.css file exists undersrc/themes/index.css.

I import index.css in App.vue as below, application can work but hot reload not work if I update index.css.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  @import "./themes/index.css";
</style>

So how to resolve this problem?

[keepfool]

I find the solution. The latest vue-cli contains a file .postcssrc.js, I think any postcss configuration should be wrote in this file.
We don't need to change the webpack.base.conf.js and vue-loader.config.js, just keep what the vue-cli has generated.

Here is my steps:

1. update build/utils.js, pass 'postcss' to generateLoaders() for css and postcss.

  return {
    css: generateLoaders('postcss'),
    postcss: generateLoaders('postcss'),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

1. update .postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-css-variables": {},
    "autoprefixer": {}
  }
}

In my application, I use two plugins postcss-import and postcss-css-variables.