如何在反应库包中 inline/include css

Question

我正在尝试构建一个可以在其他应用程序中使用的 React 组件库，我正在运行解决组件库打包 css/less 的问题。

组件库包中：

component.tsx

import React, { ReactElement } from 'react';
import styles from "./component.less";

const TestComponent: React.FC  = (): ReactElement => {
    ....

    return (
        <div className={styles.root}>
            ....
        </div>
    );
};

export default TestComponent;

component.less

@bg-color: #428bca;

.root {
    background-color: @bg-color;
}

我运行下面的命令来构建库：

> tsc --emitDeclarationOnly
> lessc src/component.less dist/library.css
> babel src --out-dir dist --extensions .ts,.tsx --source-maps
> copyfiles -u 1 src/**/*.less dist/

并在 dist 目录中获取：

> index.d.ts
> index.js
> library.css
> component.less
> ....

在不同的应用程序中，我只是安装库并使用组件：

import TestComponent from "library-package";

<TestComponent /> // in the render somewhere

当我启动此应用程序时，组件已呈现，但 css/less 代码未应用且未导入。

我想在库包中包含一些默认 css。而且我知道我可以只在应用程序的 index.tsx 中包含 library.css 并且 css 可以工作，但我不希望其他应用程序必须包含 css 文件或者有一个 less 加载程序来处理 css 如果它不使用 less 本身。

我认为目前的问题是应用程序不知道如何处理库中的 .less 文件，因为它没有 less 加载程序设置（尽管我没有收到错误关于任何事情）

tldr：应用程序只需安装组件库，将组件包含在渲染中，组件将使用一些 css 进行渲染（最好在库中使用 less）。可以吗？

Answer 1

我想我正在寻找类似 styled-components 的东西，但使用 less + 缩小而不是将 CSS 写入 JavaScript 文件并包装 HTML 标签。

使用样式化组件库，我让它以这种方式工作：

component.tsx

import React, { ReactElement } from "react";
import cssesc from "cssesc";
import styled, { ThemeProvider, DefaultTheme  } from "styled-components";

export interface TestComponentTheme extends DefaultTheme {
    backgroundColor?: string;
}

const DEFAULT_THEME: TestComponentTheme = {
    backgroundColor: "#428bca",
};

const StyledDiv = styled.div`
    background-color: ${props => cssesc(props.theme.backgroundColor)};
`;

interface TestComponentInput {
    theme?: TestComponentTheme;
}

const TestComponent: React.FC<TestComponentInput> = ({theme}: TestComponentInput ): ReactElement => {
    ....

    let componentTheme: TestComponentTheme = Object.assign({}, DEFAULT_THEME);

    if (theme) {
        componentTheme= Object.assign({}, componentTheme, theme);
    }

    return (
        <ThemeProvider theme={componentTheme}>
            <StyledDiv>
                ....
            </StyledDiv>
        </ThemeProvider>
    );
};

export default TestComponent;

构建库现在只需要两个步骤：

> tsc --emitDeclarationOnly
> babel src --out-dir dist --extensions .ts,.tsx --source-maps

并且 dist 目录中不再有 CSS 个文件：

> index.d.ts
> index.js
> ....

在不同的应用程序中，我只是安装库并使用组件（使用 CSS 内联呈现）：

import TestComponent from "library-package";

<TestComponent /> // in the render somewhere

并且我可以选择覆盖组件的 CSS：

import TestComponent, { TestComponentTheme } from "library-package";

const customTheme: TestComponentTheme = {
    backgroundColor: "#000fff",
};

<TestComponent theme={customTheme} /> // in the render somewhere

如何在反应库包中 inline/include css

How to inline/include css in a react library package

less

npm

reactjs