What is the correct way import the CSS?

[sean256]

I have a component which I want to use dragula on:

import React, { Component } from 'react';
import styles from './SomeComponent.scss';
import Dragula from 'react-dragula';

class SomeComponent extends Component{
	render(){
		let {children} = this.props
		return(
			<div className={styles['someClass']}>
				<div ref={this.dragulaDecorator}>
					{children}
				</div>
			</div>
		)
	}

	dragulaDecorator = (componentBackingInstance) => {
		if (componentBackingInstance) {
			let options = { };
			Dragula([componentBackingInstance], options);
		}
	};
}

When I try and use it, nothing appears to happen. When looking in Chromes Elements Inspector I can see it's creating the 'mirror' element and doing its thing, but the styles for the classes it's attaching to these elements are not loaded.

In the standard dragula docs it states that the styles must be imported, @import 'node_modules/dragula/dragula'

However, are these not supposed to auto load here when including the Dragula component? And if not what is the best way to get this in?

[89465127]

I am no expert, but I in my environment, I am using style-loaderand css-loader. With those, I was able to import like this: import styles from 'dragula/dist/dragula.css';

I have been playing around with Dragula on top of a light starter project: https://github.com/alicoding/react-webpack-babel

[yoDon]

@89465127's note should be added to the main README - without this step dragula simply doesn't work

[gkrinc]

I had to manually import the dragula.min.css file

import DragulaStyles from 'react-dragula/dist/dragula.min.css';

[henryruhs]

For those who are working with scoped CSS modules:

1. Import your global.css inside index.js where the root component lives

2. Prefix the original CSS with :global and put it inside global.css

:global .gu-mirror.gu-mirror {
  position: fixed;
  z-index: 9999;
  opacity: 0.8;
}

:global .gu-hide {
  display: none;
}

:global .gu-unselectable {
  user-select: none;
}

:global .gu-transit {
  opacity: 0.2;
}

I used .gu-mirror.gu-mirror over !important to increase the cascade of the declaration.

[paddotk]

With css modules I had to do this:

import '!!style-loader!css-loader!dragula/dist/dragula.min.css';
import '!!style-loader!css-loader!./draggableStyle.css';

The first line is a bare minimum for a visual indication of what's happening.
The second are custom styles that you might need/want to further style the dragged item, as the css from it is not copied to the mirror item (except inline styles maybe).