如何使用常见的less变量与样式组件？

Question

假设我在index.jsx中有一个样式化的组件

import './index.less';
class Input extends React.Component {
   ...
}

和我的index.less文件看起来：

.input{
   color: @whiteColor;
}

这个index.less必须使用在根项目中导入的mixin.less。

所以我的问题是，即使我导入了mixin.less，它也会提示找不到变量@whiteColor。有什么想法解决这个问题？

Answer 1

我感受到了同样的痛苦，为什么我的样式组件不能解决更少的变量？语法是简单的JavaScript，只需：

.input{
   color: ${props => props.whiteColor};
   // or
   color: ${props => props.theme.whiteColor};
}

但是，在我的公司，我们有数千个组件，我们真的认为语法越少越清晰，写入速度肯定更快。我们开发了Styless。

它是一个babel插件，可以解析更少并生成javascript代码。将其添加到.babelrc文件中。

{
  "plugins": ["babel-plugin-styless"]
}

然后，我们可以做!!

const Input = styled.input`
    @highlight: blue;                           // can be overwritten by theme or props
    background: darken(@highlight, 5%);         // make green darken by 5%
`;

检查here，了解如何使用index.less中的主题提供程序和加载变量！

Answer 2

您可以尝试在index.less中导入mixin.less

Answer 3

我一直在尝试和你一样。

但后来我想......那是我真正想要的吗？因为样式组件提出了一种不同的方法来为您的样式提供模块化结构。

https://www.styled-components.com/docs/advanced检查主题，是惊人的强大。 因为在样式化组件中，您可以使用javascript定义变量。

如果你想要更少的颜色操作，sass，你可以检查https://github.com/erikras/styled-components-theme

它就像忘记了更少，并且将它移动到一个新的风格模块。

不过，如果你想保留你定义的样式类，你可以这样做：

class MyComponent extends React.Component {
  render() {
    // Attach the passed-in className to the DOM node
    return <div className={`some-global-class ${this.props.className}`} />;
  }
}

检查文档中现有的CSS使用情况：https://www.styled-components.com/docs/advanced#existing-css