Ad

Using External Styles And Multiple Class Names With Webpack Css Loader

- 1 answer

Is there a way to use external css (i.e bootstrap, semantic-ui, foundation, etc) while still getting the base64 class names? This could be possible if there was a way to use multiple class names.

Currently you can only use one class name like this

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>
    );
  }
}

I need to be able to use multiple class names like this:

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

in order to use css frameworks and get the base64 class names. Is there a way to do this?

TL;DR: I want to have multiple class names from a file that doesn't have :local(...) for each of the class names (semantic-ui) and get the base64 random class names. Using them. If I import ../semantic/dist/components/button.min.css I can use className="ui red button" fine, but if I import Semantic from '../semantic/dist/components/button.min.css', I can't use className={Semantic.ui + " " + Semantic.button}

Ad

Answer

use classnames npm module

import classNames from 'classnames'

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