Error: No PostCSS Config found in... 报错 踩坑记

Posted 2023-05-04

参考技术A vue cli3.0新建项目可能会遇到这个报错 Error: No PostCSS Config found in...

在项目根目录新建postcss.config.js文件，并对postcss进行配置：

之后重新运行项目。ok

postcss原本是配置在webpack.config.js，vue3.0是没有webpack.config.js
postcss.config.js是针对webpack3.0做的特殊处理

tailwind + vue

 

1. 在根目录下生成 tailwind 配置文件

   npx tailwind init --full

    

2. 修改 package.json 的 postcss 选项

     "postcss": 
       "plugins": 
         "tailwindcss": "./tailwind.config.js",
         "autoprefixer": 
       
     ,

    

3. 导入样式到 App.vue 下

   <style>
   @import "../node_modules/tailwindcss/base.css";
   @import "../node_modules/tailwindcss/components.css";
   @import "../node_modules/tailwindcss/utilities.css";
   </style>

    

4. 刷新页面测试是否生效了
5. 在 tailwind.config.js 修改颜色等，做定制

   theme: 
       screens: 
         sm: ‘640px‘,
         md: ‘768px‘,
         lg: ‘1024px‘,
         xl: ‘1280px‘,
       ,
       colors: 
         transparent: ‘transparent‘,
   
         black: ‘#000‘,
         white: ‘#fff‘,
         gray: 
           // 100: ‘#f7fafc‘,
           200: ‘#e8e8ea‘,
           300: ‘#e5e5e5‘,
           // 900: ‘#1a202c‘,
         ,
         red: 
           default: ‘#db0300‘,
           dark: ‘#c40400‘,
         ,
       ,