0

所以我有一个非常奇怪的用例。我需要两个顺风文件，每个文件都更改了原色。

这是一个例子。

const primaryTheme = {
    '50': '#fff3e0',
    '100': '#ffe0b2',
    '200': '#ffcc80',
    '300': '#ffb74d',
    '400': '#ffa726',
    '500': '#ff9800',
    '600': '#fb8c00',
    '700': '#f57c00',
    '800': '#ef6c00',
    '900': '#e65000',
};


module.exports = {

 ...

theme: {
  extend: {
    colors: {
        primary: primaryTheme,
}

...

所以这将是一个文件，另一个将交换 primaryTheme const 说这个

primaryTheme = {
        '50': '#e6f5ea',
        '100': '#c2e7cb',
        '200': '#9bd7ab',
        '300': '#71c889',
        '400': '#4fbc70',
        '500': '#27b057',
        '600': '#1da14d',
        '700': '#0f8f41',
        '800': '#007e37',
        '900': '#005f23',
      }

所以我试图在需要构建生产时，将颜色变量更改为一组预定义的颜色。

所以一个构建可能会生成两个 app.css 文件

app-blue.css
app-green.csss

例如，主要主题变量发生了变化。

有没有办法让我自动化这个，所以我不必每次都手动将 const 换成不同的颜色，然后更改文件名？

目前我正在通过 npx 构建，但我也可以使用 postcss


"scripts": {
    "dev": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --watch",
    "build": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --minify"
  },

如果这样做更容易，我希望只在“构建”上生成多个文件。

非常感谢您提前提供任何提示或指导:)

4

0 回答 0