css - 在 webpack css loader 中使用外部样式和多个类名

Question

有没有办法在使用外部 css(即 bootstrap、semantic-ui、foundation 等)的同时仍然获得 base64 类名？如果有一种方法可以使用多个类名，这就有可能实现。

目前你只能使用一个这样的类名

import React, {Component} from 'react';
import style from './App.scss';
import styles from '../semantic/dist/components/button.min.css'

  render() {
    return (
      <div className="App">
        <div className={style.button}>Hello Webpack!!!</div>
    );
  }
}

我需要能够像这样使用多个类名:

<div className={style.btn} + {style.red}>Hello Webpack!!!</div>

为了使用 css 框架并获取 base64 类名。有办法做到这一点吗？

TL;DR:我想从一个没有 :local(...) 的文件中为每个类名 (semantic-ui) 获取多个类名，并获取 base64 随机类名。使用它们。如果我导入 ../semantic/dist/components/button.min.css 我可以使用 className="ui red button" 很好，但是如果我 import来自 '../semantic/dist/components/button.min.css' 的语义，我不能使用 className={Semantic.ui + ""+ Semantic.button}

Answer 1

使用类名 npm 模块

import classNames from 'classnames'

render: <div className={classNames(style.red,style.btn)}>Hello Webpack!!!</div>