Using external styles and multiple class names with webpack css loader

Question

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}`

I'm not sure what your question is. className accepts a string, so you can easily use multiple values: className={`${class1} ${class2}`}. But I'm not sure what you mean when you refer to the "base64 class names" of the frameworks. Why wouldn't you use classes like normal? — Josh David Miller
– Josh David Miller, Commented Jan 12, 2016 at 1:15
@JoshDavidMiller 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. — Un3qual
– Un3qual, Commented Jan 12, 2016 at 2:12
Right, but what's the problem? Are you having trouble importing them or using them? — Josh David Miller
– Josh David Miller, Commented Jan 12, 2016 at 2:52
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} most likely because the semantic-ui css files don't have the :local(...) prefix. — Un3qual
– Un3qual, Commented Jan 12, 2016 at 15:58
I guess I'm a little confused. If they don't use :local, why would they have random class names? Back to my original comment, why can't you do className="ui red button"? — Josh David Miller
– Josh David Miller, Commented Jan 12, 2016 at 19:58

Shishir Arora · Accepted Answer · 2016-06-20 06:14:50Z

4

use classnames npm module

import classNames from 'classnames'

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

answered Jun 20, 2016 at 6:14

Shishir Arora

5,9934 gold badges33 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:09:26Z

2

See this for using bootstrap along with your css styles.. Webpack Multiple CSS Loaders

And to use multiple classnames you can simply write like this in place of

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jul 6, 2016 at 10:50

user4076248

4432 gold badges5 silver badges11 bronze badges

Comments

Daleen van Zyl · Accepted Answer · 2018-11-21 10:40:43Z

0

or: className={ [styles.button, styles.red].join(' ') }

answered Nov 21, 2018 at 10:40

Daleen van Zyl

1

3 Comments

barbsan Over a year ago

This is basically the same answer as this just concatenates strings in other way

Daleen van Zyl Over a year ago

Yes, I know . So one can choose which one works the best :-)

barbsan Over a year ago

There are also other ways to concatenate string but it's not subject of this question

Collectives™ on Stack Overflow

Using external styles and multiple class names with webpack css loader

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related