在webpack css loader

Question

有没有办法在获取base64类名的同时使用外部css（即bootstrap，semantic-ui，foundation等）？如果有一种方法可以使用多个类名，那么这是可能的。

目前，您只能使用一个类名称

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：我希望文件中有多个类名，每个类名（semantic-ui）都没有：local（...），并获取base64随机类名。使用它们。如果我导入../semantic/dist/components/button.min.css我可以使用className="ui red button"罚款，但如果我import Semantic from '../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>

Answer 2

使用bootstrap以及css样式来查看此内容。Webpack Multiple CSS Loaders

要使用多个类名，您可以像这样编写

{style1} + {style2}: 
   className={
       styles.button + " " + styles.red
   }

Answer 3

或：className = {[styles.button，styles.red] .join（''）}