vite模式下postcss出了点小问题

DCLangX commented 2 years ago

详细描述你的问题

用的vite+vue3+nestjs，vite之前会自动加载根目录下配置的postcss.config.js 昨天更新了下依赖，发现根目录下配置的postcss.config.js文件失效了，

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return 37.5
      },
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: ['no-rem'],
      replace: true,
      mediaQuery: false,
    },
  },
}

本来以为是作者大佬不小心写了新bug= =，回滚了ssr的版本，发现并不是，一番搜索后好像是配置语法变了 https://github.com/vitejs/vite/issues/5175 于是改成这样

module.exports = {
  plugins: [
    [
      'postcss-pxtorem',
      {
        rootValue({ file }) {
          return 37.5
        },
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: ['no-rem'],
        replace: true,
        mediaQuery: false,
      },
    ],
  ],
}

发现还是没有用，最后一顿操作，临时修改了依赖，在ssr-plugin-vue3里加了段vite配置

css:{
        postcss:{
            plugins: [require('postcss-pxtorem')(
                    {
                    rootValue({ file }) {
                        return 37.5
                    },
                    unitPrecision: 5,
                    propList: ['*'],
                    selectorBlackList: ['no-rem'],
                    replace: true,
                    mediaQuery: false,
                },
            )]
        }
    },

这样改完能用，暂时也就摸索出这个方法，我也不知道问题在哪里，或许跟postcss更新有关？希望作者大佬方便的话，能查查咋整 https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#gulp

期望的结果

postcss.config.js能正常使用，或者config.ts里能开放vite的css配置项

你本人对问题可能的原因判断(如果你能大概判断的话)

可能需要更新一下ssr-plugin-vue3里的postcss相关依赖

zhangyuang commented 2 years ago

先尝试回滚锁定依赖看看有没有问题，目测这不是ssr框架的问题

zhangyuang commented 2 years ago

你可以尝试用这个配置，在webpack/vite 场景下通用

DCLangX commented 2 years ago

你可以尝试用这个配置，在webpack/vite 场景下通用

好的，感谢指点，试了下，稍稍有点棘手🙃，不知道改的对不对，我把config.ts改成这样

import type { UserConfig } from 'ssr-types'
const userConfig: UserConfig = {
  isVite: true,
  css: () => {
    return {
      loaderOptions: {
        postcss: {
          options: {}, // 推荐使用 object see https://www.npmjs.com/package/postcss-loader/v/4.3.0
          plugins: [
            'postcss-pxtorem',
            {
              rootValue({ file }) {
                return 37.5
              },
              unitPrecision: 5,
              propList: ['*'],
              selectorBlackList: ['no-rem'],
              replace: true,
              mediaQuery: false,
            },
          ],
        },
      },
    }
  },
}

export { userConfig }

运行提示

error: 下午6:35:05 [vite] Error when evaluating SSR module /node_modules/vant/es/notify/style/index.js:
Error: postcss-pxtorem is not a PostCSS plugin
    at Processor.normalize (D:\项目\前端项目\pdi重构\源码\node_modules\vite\node_modules\postcss\lib\processor.js:56:15)
    at new Processor (D:\项目\前端项目\pdi重构\源码\node_modules\vite\node_modules\postcss\lib\processor.js:11:25)
    at Object.postcss (D:\项目\前端项目\pdi重构\源码\node_modules\vite\node_modules\postcss\lib\postcss.js:26:10)
    at compileCSS (D:\项目\前端项目\pdi重构\源码\node_modules\vite\src\node\plugins\css.ts:720:13)
    at TransformContext.transform (D:\项目\前端项目\pdi重构\源码\node_modules\vite\src\node\plugins\css.ts:183:11)
    at Object.transform (D:\项目\前端项目\pdi重构\源码\node_modules\vite\src\node\server\pluginContainer.ts:563:20)
    at doTransform (D:\项目\前端项目\pdi重构\源码\node_modules\vite\src\node\server\transformRequest.ts:155:27)

我太菜了🙃，就这破玩意折腾一天了，一行代码没写🙃，心态崩了

zhangyuang commented 2 years ago

DCLangX commented 2 years ago

谢谢，原来这里也能用require语法，又能加班干活了🤡

zhangyuang commented 2 years ago

上线后可以提pr加入到readme使用用户中

zhangyuang / ssr