vite 配置postcss

由于vite 官网对于postcss的描述过少,导致我在配置的时候出现了一些错误:在vite config里面使用标准的postcss配置


[vite] Internal server error: postcssConfig.plugins.slice is not a function

首先在外部创建postcss.config.js用我们熟悉的写法是可以的,但是我们的目的是在vite.config.js里面配置。

我们首先需要导入使用的插件,任何导入方式都是会被转化为es模块,然后初始化插件及配置项后,放入plugins数组里面就可以正常使用;


import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw=pxtovw({
    viewportWidth: 200,
    viewportUnit: 'vw'
})
export default defineConfig({
    plugins: [vue()],
    css: {
        postcss:{
            plugins: [loder_pxtovw]
        }
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    }
})


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • PostCSS PostCSS是一款使用JavaScript插件对CSS实现转换的工具 PostCSS拥有非常强大...
    JunChow520阅读 12,569评论 2 5
  • 在前端开发中一直有个原则,叫做"关注点分离",意思就是各种技术只负责自己的领域,不要混合在一起,形成耦合,这种原则...
    li4065阅读 2,911评论 0 0
  • 总方针:是什么?从哪里来?要到哪里去? 一、是什么? * vite ------- vue 作者尤雨溪开发的web...
    无相_庸才阅读 1,596评论 0 0
  • 代码:github 一、webpack4--基本配置 1.初始化配置 目录结构 安装webpacknpm inst...
    qfstudy阅读 690评论 1 1
  • webpack 是一个流行的前端项目构建工具(打包工具),可以解决当前 web 开发中所面临的困境。webpack...
    A_si阅读 670评论 0 0