标签: create-react-kotlin-app

我正在尝试在节点中使用 create-react-kotlin-app 在 kotlin-react 应用程序中使用 scss 以便于引导，但我坚持设置配置以使其工作

我已经弹出，所以我可以手动编辑 webpack 配置。我已经将以下内容添加到 dev config 和相应的 prod 等价物。

  {
    test: /\.scss$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('sass-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },

修改 package.json 并运行 npm install

"babel": {
 "presets": …

我正在尝试在我的create-react-kotlin-app中使用这个lib :

https://material-ui-next.com/

我想生成一堆类型的安全包装器.我开始是这样的:

@file:JsModule("material-ui")

package material

import react.RState
import react.React
import react.ReactElement

external class Typography : React.Component<dynamic, RState> {
    override fun render(): ReactElement
}

...

fun RBuilder.typography(
    classes: String = "",
    variant: Variant = Variant.body1,
    align: Align = Align.inherit,
    color: Color = Color.default,
    gutterBottom: Boolean = false,
    noWrap: Boolean = false,
    paragraph: Boolean = false,
    handler: RHandler<dynamic>
) = child(Typography::class) {
    attrs {
        this.className = classes
        this.align = align.name
        this.color = color.name
        this.variant = variant.name
        this.gutterBottom = …

我使用create-react-kotlin-app命令创建了一个应用，并且可以在Chrome中正常加载。我通过NPM添加了React Material UI包，并成功了。现在如何在组件中使用Material UI模块？

通常使用JavaScript，它很简单import Button from '@material-ui/core/Button'，位于组件文件的顶部，但是Kotlin不喜欢这样。

如何将那条线翻译成Kotlin？我没有使用Gradle。