嘗試導入 tailwind 配置以訪問顏色值作為 a.tsx 文件中的 js 變量會引發錯誤（使用帶有 react-swc 插件的 vite 作為構建工具）

Question

我在嘗試將我定義的值從 tailwind.config.cjs 導入到 PageStats.tsx 時遇到問題。 有人可以為我做錯什么提供明確的答案嗎？

這是試圖導入它的文件：

import React from "react";
import Card from "../components/Card";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../../tailwind.config.cjs";

type Props = {};
const mockData = [
...
];

const cssConfig = resolveConfig(tailwindConfig);
let accent = "#8884d8";
if (cssConfig && cssConfig.theme && cssConfig.theme.colors) {
accent = cssConfig?.theme?.color['accent'];
};

function PageStats({}: Props) {
  return (
  [...]
  );
}

export default PageStats;

這是我的 tailwind.config.cjs：

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./public/*.svg"],
  theme: {
    extend: {
      keyframes: {
        gradient: {
          '0%, 100%': { 'background-size': '400% 400%', 'background-position': '0% 50%' },
          '50%': { 'background-size': '200% 200%', 'background-position': '100% 50%' },
        },
      },
      animation: {
        gradient: 'gradient 7s ease infinite',
      },
      boxShadow: {
        'outline': '0 0 8px 2px rgba(0, 0, 0, 0.5)',
      },
      colors: {
        'primary': '#0F172A',
        'secondary': '#181E41',
        'tertiary': '#2C2F54',
        'pop': '#FFCDB2',
        'pop-2': '#ff9090',
        'accent': '#574AE2',
        'success': '#2F9C95',
        'warning': '#F2CD5D',
        'danger': '#FF1053',
        'info': '#4465FF', 
      },
      borderRadius: {
        'ce': '12px'
      }
    }
  },
  plugins: []
};

在我的 IDE (VSCode) 中沒有錯誤，在我的瀏覽器中只有這些錯誤：

可能跟Vite有關系，不過我真的是一頭霧水！

Answer 1

Vite 不支持開箱即用的 commonJS。 現在因為tailwind.config.cjs是 commonJS 你需要一些配置來讓它工作：

import commonjs from 'vite-plugin-commonjs';

export default {
  plugins: [commonjs()],
  resolve: {
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.cjs']
  }
}

你需要vite-plugin-commonjs將 commonJS 轉換成 JS 模塊文件。

您還需要將'.cjs'添加到resolve.extensions列表中。 否則上面的插件也不會工作。 （這是因為 vite 默認的列表是['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] source ）。 我在這里停留了一段時間。