在样式化组件中使用Ant设计变量

Question

我正在Ant Design站点内将Styled Components与GatsbyJS结合使用。我希望能够访问样式化组件内的Ant Design变量（用Less编写）。像这样的东西：

const StyledButton = styled(Button)`
  background-color: @primary-color
`

我进行了一些研究，发现了两个可以提供帮助的库，但是我不知道如何使它们工作（至少在Gatsby设置中不行）。这些是库：

• https://github.com/michaeltaranto/less-vars-to-js
• https://github.com/jean343/styless

Styless包中有一个示例，说明如何使较少的变量在样式组合中工作：https://github.com/jean343/styless/blob/master/examples/Theme.js。

但是，无论我是尝试在gatsby-ssr.js还是gatsby-browser.js的基本布局组件中实施该示例，我都无法在我的Gatsby网站上使用该示例。

[因此，我想知道-是否有一种方法可以访问GatsbyJS网站中的样式化组件内部的Less变量（使用这些库，也可以不使用）？如果是这样，如何？

谢谢。

Answer 1

如果只想在样式化组件中获取Antd变量名称，则可以改用import的styless选项。这要简单得多，不需要解析任何变量。

在您的.babelrc中，使用此代码导入样式。

{
    "plugins": [
        [
            "styless",
            {
                "import": "~antd/lib/style/themes/default.less",
                "lessOptions": {
                    "javascriptEnabled": true
                }
            }
        ]
    ]
}

然后，所有客户端代码都可以简化为：

import React from "react"
import { Button } from 'antd';
import styled from "styled-components"
import "antd/dist/antd.css";

const StyledButton = styled( Button )`
  background-color: @primary-color;
`;

export default () => {
    return <StyledButton>button</StyledButton>
}

不要忘记删除.cache文件夹以使效果生效。

Answer 2

[使用Gatsby时，可以使用装载程序，在这种情况下，可以使用"less-vars-loader!antd/lib/style/themes/default.less"获得变量名

这对于没有变量的简单工作表会很好，但是对于Antd来说，设置变量@primary-color: @blue-6;时效果不佳。

import React from "react"
import { Button } from 'antd';
import styled, { ThemeProvider } from "styled-components"
import Layout from "../components/layout"
import DefaultTheme from "less-vars-loader!antd/lib/style/themes/default.less"
import "antd/dist/antd.css";

const StyledButton = styled( Button )`
  background-color: @primary-color;
`;

const App = () => (
    <Layout>
        <StyledButton>Hi people</StyledButton>
    </Layout>
);
console.log( "DefaultTheme", DefaultTheme["primary-color"] ); // Here, this shows @blue-6
DefaultTheme["primary-color"] = "blue"; // For demo purpose, setting the value here.

export default () => (
    <ThemeProvider theme={DefaultTheme}><App/></ThemeProvider>
);

按照承诺，我正在添加示例Webpack加载程序来解析antd变量。它确实解析了大约600个变量，但仍然失败，并显示"JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'"。这对于不需要javascriptEnabled的项目很有用。

const less = require( "less" );
const varRgx = /^[@$]/;

module.exports = async source => {
    const resolveVariables = async () => {
        const root = await new Promise( resolve => {
            const parseOpts = {
                javascriptEnabled: true,
                paths: ["node_modules/antd/lib/style/themes/"],
            };
            less.parse( source, parseOpts, ( e, root, imports, options ) => {
                if( e ){
                    console.error( `LESSLoader - Error compiling`, e );
                }
                resolve( root );
            } );
        } );
        if( !root ) return;

        const evalEnv = new less.contexts.Eval();
        evalEnv.frames = [root];
        evalEnv.javascriptEnabled = true;

        const ret = {};
        for( let [name, variable] of Object.entries( root.variables() ) ){
            ret[name.replace( varRgx, "" )] = variable.value.eval( evalEnv ).toCSS();
        }
        return ret;
    };

    return `module.exports = ${JSON.stringify( await resolveVariables() )};`;
};

可以用import DefaultTheme from "./LESSLoader!antd/lib/style/themes/default.less"调用。