rsbuild-plugin-legacy-deps-compat v0.1.7

rsbuild-plugin-legacy-deps-compat

English | 简体中文

假设有一个老项目，这个项目使用了webpack@4.x和postcss@7.x，你想使用rsbuild来为开发和构建提效，但同时又想保留原有的构建方式。这时你可能会发现报错了，这个插件尝试解决这个问题，目前支持解决webpack和postcss相关的报错

快速开始

1. 安装依赖

npm i rsbuild-plugin-legacy-deps-compat -D

2. 配置 rsbuild

import { defineConfig } from '@rsbuild/core'
import legacyDepsCompat from 'rsbuild-plugin-legacy-deps-compat'

export default defineConfig({
  plugins: [
    // 项目中使用了任意版本的 webpack 和 postcss@7.x
    legacyDepsCompat(),

    // 项目中使用了任意的 webpack 和 postcss@<7 ，但是想在rsbuild中使用 postcss@8
    legacyDepsCompat({
      postcss: {
        // 将 postcss.config.js 放在 compat 目录下
        configDir: 'compat',
      },
    }),

    // 项目中使用了任意版本的 webpack 并且想使用自定义的 postcss-loader
    legacyDepsCompat({
      postcss: {
        customPostcssLoaderOptions: {
          // 这里填写 postcss-loader 的配置
        },
      },
    }),
  ]
})

配置

使用自定义postcss-loader遇到的组件库样式问题

module.exports = ":root{--van-swipe-indicator-size:0.12rem;}"

如果遇到组件库的样式变成上面这样，虽然不知道具体原因，但是经过测试在postcss-loader之前加入一个空的loader可以解决问题，这里已经内置到了配置之中

export default defineConfig({
  plugins: [
    legacyDepsCompat({
      customPostcssLoaderOptions: {},
      addEmptyLoader: true,
    }),
  ],
});