import React, { Component } from "react";

import { Button } from "@kube-design/components";

class Example extends Component {
  render() {
    return <Button>Button</Button>;
  }
}

import "@kube-design/components/esm/styles/index.css";

import "@kube-design/components/esm/styles/index.scss";

// module.rules
[
  ...otherRules,
  {
    test: /\.s[ac]ss$/i,
    include: root("node_modules"),
    use: ["style-loader", "css-loader", "sass-loader"],
  },
];

// babel.config.js

const getBabelPluginImportConfig = require('@kube-design/components/babel.plugin.import')

...

"plugins": [
  ['import', getBabelPluginImportConfig()],
]

import "@kube-design/components/esm/styles/main.scss";

// locales.js

const locales = {
  "en-US": {
    HELLO: "Hello!",
  },
  "zh-CN": {
    HELLO: "你好!",
  },
};

export default locales;

import React from "react";
import ReactDOM from "react-dom";
import { LocaleProvider } from "@kube-design/components";
import locales from "./locales";
import App from "./App";

window.locale = LocaleProvider.locale;

const App = () => (
  <LocaleProvider locales={locales} currentLocale="en">
    <App />
  </LocaleProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";
import { Button } from "@kube-design/components";

export default () => <Button>{locale.get("HELLO")}</Button>;