使用Vite2引用自定义css样式被本身的样式覆盖

[zilan830]

问题描述

• 使用了之前官方提供的导出自定义css工具，并引入到项目里，但是并没有显示。还是被默认的样式覆盖。如果在控制台里将原有的样式勾选掉，就会出现自定义的样式。

semi-ui version

• ^2.1.5

Expected result 期望的结果是什么

• 使用自定义样式

Actual result 实际的结果是什么

• 被默认样式覆盖

Steps to reproduce 复现步骤

• 在 App.tsx 里引入自定义 css 样式
• vite配置

Reproducible code 复现代码

import { ConfigEnv, UserConfigExport, Plugin, optimizeDeps } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import legacy from '@vitejs/plugin-legacy'
import vitePluginImp from 'vite-plugin-imp'
import visualizer from 'rollup-plugin-visualizer'
import path from 'path'
import fs from 'fs'
import dotenv from 'dotenv'
import { minifyHtml } from 'vite-plugin-html'

const config: UserConfigExport = {
  optimizeDeps: {
    include: ['lodash']
  },
  plugins: [
    reactRefresh(),
    legacy({
      targets: ['Android >= 39', 'Chrome >= 39', 'Safari >= 10.1', 'iOS >= 10', '> 0.5%'],
      polyfills: ['es.promise', 'regenerator-runtime']
    }),
    // 引入semi-ui
    vitePluginImp({
      libList: [
        {
          libName: '@douyinfe/semi-ui'
          // style: (name) => {
          //   return './src/styles/theme.css'
          // }
        }
      ]
    })
  ],
  resolve: {
    alias: [
      {
        find: /@\//,
        replacement: path.join(__dirname, './src/')
      }
    ]
  },
  css: {
    preprocessorOptions: {
      scss: {}
    },
    modules: {
      localsConvention: 'camelCase'
    }
  }
}

export default ({ command, mode }: ConfigEnv) => {
  const envFiles = [/** mode file */ `.env.${mode}`, /** default file */ `.env`]
  const { plugins = [], build = {} } = config
  const { rollupOptions = {} } = build

  for (const file of envFiles) {
    try {
      fs.accessSync(file, fs.constants.F_OK)
      const envConfig = dotenv.parse(fs.readFileSync(file))
      for (const k in envConfig) {
        if (Object.prototype.hasOwnProperty.call(envConfig, k)) {
          process.env[k] = envConfig[k]
        }
      }
    } catch (error) {
      console.log('配置文件不存在，忽略')
    }
  }

  const isBuild = command === 'build'
  // const base = isBuild ? process.env.VITE_STATIC_CDN : '//localhost:3000/'

  config.base = process.env.VITE_STATIC_CDN

  if (isBuild) {
    // 压缩 Html 插件
    config.plugins = [...plugins, minifyHtml()]
    config.define = {
      'process.env.NODE_ENV': '"production"'
    }
  }

  if (process.env.VISUALIZER) {
    const { plugins = [] } = rollupOptions
    rollupOptions.plugins = [
      ...plugins,
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true
      })
    ]
  }
  return config
}

[zilan830]

找到原因了，因为用了React.lazy加载页面，就会导致先用了默认样式。请问这个有解决方案么？

[zilan830]

还有semi-ui在vite里可以按需加载么？使用过'vite-plugin-imp'和'vite-plugin-importer'都不行，后面那个还报错。

[pointhalo]

这种方式来使用的话，自带的css跟你新插入的css的优先级问题，不太好避免。因为选择器的权重都是一样的。
1、我们有计划提供 vite 版本的plugin 支持 theme、prefixCls 等的使用，会与 semi webpack plugin对齐，届时可以解决你这类问题。当前尚有较多a11相关的改造在进行中，搞完a11y会看下vite plugin的问题。预计2月份吧，具体时间节点还没定。

2、semi在vite/webpack里都是可以按需加载的。都是esmodule，本来就支持，不需要做额外配置。（但是vite下目前发现存在的问题有：js被shaking了，但是对应的css并没有，依然是全量的，有可能是vite prebuild的影响，还没确定具体是什么原因，见issue：https://github.com/DouyinFE/semi-design/issues/337）

[pointhalo]

更新一下使用方式

可以参考 https://semi.design/dsm/doc 使用社区开发者贡献的 vite plugin