Vue-cli: main.js中引入外部css文件报错Module build failed: Error: No PostCSS Config found

[icewind7030]

Version

3.0.0-beta.6

Reproduction link

https://codepen.io/icewind7030/pen/PRvEPY

Steps to reproduce

1. 使用vue-cli默认配置初始化一个新的工程；
2. 切换到新的工程目录下，运行yarn serve；
3. 然后在main.js的头部加入工程目录以外的外部css的引用

import '../../../css/component/base.css'

What is expected?

将外部引入的css文件打包进入生成的css bundle中

What is actually happening?

vue cli service 报错

Module build failed: Error: No PostCSS Config found in: /Users/xxx/Documents/work/snailreader-web/src/main/webapp/static/css/component
    at /Users/xxx/Documents/work/snailreader-web/src/main/webapp/static/book/shareRead/node_modules/postcss-load-config/index.js:51:26
    at <anonymous>

 @ /Users/liushichuan/Documents/work/snailreader-web/src/main/webapp/static/css/component/base.css 4:14-173 14:3-18:5 15:22-181
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

---

引入vue cli创建的目录内的css文件是不会报错的

[dhensche]

By default, postcss-loader looks for configs in a cascading manner upwards from the imported css file (in your case outside of the webpack project root directory). You can configure the loader to use a specific path (instead of using the cascading logic from the location of the imported file) by setting the config.path option. This can be done by customizing your webpack configuration using one of the methods described in the docs. A working example would be

module.exports = {
  configureWebpack: config => {
    config.module.rules = config.module.rules.map(r => {
      r.use = r.use.map(u => {
        if (u.loader === 'postcss-loader') {
          u.options = {
            ...u.options,
            config: {
              path: './'
            }
          }
        }
        return u
      })
      return r
    })
  }
}

I am not 100% sure you have to go this route, but each individual style loader (css, sass, scss, styl, etc. ) are updated using this logic

[icewind7030]

@dhensche Thanks, it helps a lot!