CSS-переменные, передаваемые styled-компонентами, применяемыми к antd-компонентам, исчезают после компиляции веб-пакетом в рабочем режиме - PullRequest
Новая
       35

CSS-переменные, передаваемые styled-компонентами, применяемыми к antd-компонентам, исчезают после компиляции веб-пакетом в рабочем режиме

1 голос
/ 04 июня 2019

Я использую Ant-дизайн со стилевыми компонентами и хочу, чтобы мое приложение создавалось с помощью переменных css. 

package.json:
"dependencies": {
...
"antd": "^3.19.1",
"styled-components": "^4.2.1",
...
}
..."webpack": "^4.29.6",
"babel-plugin-styled-components": "^1.10.0",
...

.babelrc:
{
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    ["styled-components", {
      "minify": false,
      "ssr": false,
      "pure": true
    }]
  ],
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

import { Input } from "antd";
import styled from "styled-components";

const StyledInput = styled(Input)`
  && {
    background-color: var(--primaryColor, #fff);
  }
`;

Когда я запускаю свое приложение в режиме "разработки" веб-пакета - все в порядке, результат: 

.ijJGje.ijJGje {
    background-color: var(--primaryColor,#fff);
}

затем я меняю режим веб-пакета на «производство», и результат: 

.ijJGje.ijJGje {
    background-color: #fff;
}

Я пробовал разные настройки стилевых компонентов в файле .babelrc. Это не помогает мне.

P.S. Оказывается, проблема более серьезная. В этом контексте я не могу передать большинство параметров css (например, границы) с помощью css-переменных. Со значением по умолчанию или без.

Как я могу это исправить?

...