react import xterm don't load css file ?

[zhangjie2012]

Details

• Browser and browser version:
• OS version:
• xterm.js version: 3.3.0

Steps to reproduce

1. npm install xterm --save
2. new Terminal() and term.open(document.getElementById('terminal-container'));

Looks like not load xterm css file ? I use xterm with react.

[ghost]

Hi zhangjie2012,

I don't know that much about react but when you require('xterm') or import 'xterm' you only get js unless your using some special loader. Webpack has a special loader to handle style/css but you have to point to xterm's css file using the import statement. Refer to your bundler/loader's documentation for loading css.

To be clear. The css and js files are stored separately and usually need multiple import statements to get them both.

[Tyriar]

Yes you'll need to include the CSS file as well as in the getting started snippet https://github.com/xtermjs/xterm.js#getting-started

[monsterooo]

for scss:

@import '~xterm/dist/xterm.css';

[nahidacm]

In react you can do:

import 'xterm/css/xterm.css';