import css 报错：Module build failed: Error: No PostCSS Config found in: ...

最新推荐文章于 2022-02-16 14:13:11 发布

原创最新推荐文章于 2022-02-16 14:13:11 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE.JS 专栏收录该内容

10 篇文章

订阅专栏

本文讲述了在Vue项目中遇到import.css报错，通过新建.postcssrc.js配置文件并设置相关插件，解决路径查找问题的过程。关键步骤包括引入postcss-plugins和配置文件编写。

发生原因：在main.js 文件通过import引入.css文件时报错，找不到文件。路径和引入方法都是正确的

完整错误：

Module build failed: Error: No PostCSS Config found in: D:\vuetest\src
    at D:\vuetest\node_modules\postcss-load-config\src\index.js:55:15

解决办法：

由报错信息 at D:\vuetest\node_modules\postcss-load-config\src\index.js:55:15 可知应该是配置文件有问题。由此我对比可以正常引入 css文件的项目可知，根目录下缺少了文件 .postcssrc.js。不上文件即可，项目根目录新建.postcssrc.js 文件，原本文件内容如下：

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

引入CSS文件

第一种在main.js 中引入：（全局）

import '对应的文件路径.css'

第二种在某个组件：（局部）

在 style 样式中引入

<style>
    @import '对应的文件路径.css'
</style>

或者

<style src="对应的文件路径.css">
</style>

如果需要局部使用，style 属性 加上 scoped
<style scoped src="对应的文件路径.css">
</style>