Импорт CSS в React Component не работает в приложении Electron - PullRequest
Новая
       27

Импорт CSS в React Component не работает в приложении Electron

2 голосов
/ 23 апреля 2019

Прежде всего, я хочу извиниться, потому что мне кажется, что у меня нет теоретического фона для этой проблемы, но сейчас я застрял, вот и я.

Я хочу настроить приложение Electronтолько с обычной точкой входа main.js, которая обрабатывает создание BrowserWindow.Я хочу создать несколько разных окон, поэтому шаблоны, которые я нашел в Интернете, мне не подходят.

Итак, мой main.js создает окно, используя файл .html, который использует тег script длядобавьте его средство визуализации, которое просто настраивает компонент React, например так: 

const React = require('react');
const ReactDOM = require("react-dom");
const ReactComponent = require('path/to/component').default;

window.onload = () => {
    ReactDOM.render(<ReactComponent />, document.getElementById('my-component'));
};

Мой компонент пока очень прост: 

import React from 'react';
import './ReactComponent.css';

class ReactComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="ReactComponent">
                some text
            </div>
        );
    }
}

export default ReactComponent;

И .css еще проще: 

.ReactComponent {background-color: red;}

Я использовал Gulp + Babel для компиляции своего кода, и все работает хорошо, пока я не добавлю

import './ReactComponent.css';

Что выдает эту ошибку:

Uncaught SyntaxError: Неожиданный токен.

Чтение файла .css.

Вот мой .babelrc: 

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

И мой gulpfile.js: 

const spawn = require('child_process').spawn;
const gulp = require('gulp');
const maps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const css = require('gulp-css');
const path = require('path');

/* Build */

gulp.task('build-css', function () {
    return gulp.src('src/**/*.css')
        .pipe(maps.init())
        .pipe(css())
        .pipe(maps.write('.'))
        .pipe(gulp.dest('dist/src'));
});

gulp.task('build-js', () => {
    return gulp.src(['src/**/*.js', 'src/**/*.jsx', '!src/**/*.test.js'])
        .pipe(maps.init())
        .pipe(babel())
        .pipe(maps.write('.'))
        .pipe(gulp.dest('dist/src'));
});

gulp.task('build-main-js', () => {
    return gulp.src('main.js')
        .pipe(maps.init())
        .pipe(babel())
        .pipe(maps.write('.'))
        .pipe(gulp.dest('dist/'));
});


gulp.task('build', gulp.series('build-css', 'build-js', 'build-main-js'));


/* Copy */

gulp.task('copy-html', () => {
    return gulp.src('src/**/*.html')
        .pipe(maps.init())
        .pipe(maps.write('.'))
        .pipe(gulp.dest('dist/src'));
});

gulp.task('copy-assets', () => {
    return gulp.src('assets/**/*').pipe(gulp.dest('dist/assets'));
});

gulp.task('copy', gulp.parallel('copy-html', 'copy-assets'));



/* Execute */

const cmd = (name) => path.resolve(__dirname) + '\\node_modules\\.bin\\' + name + '.cmd';
const args = (more) => Array.isArray(more) ? ['.'].concat(more) : ['.'];
const exit = () => process.exit();

gulp.task('start', gulp.series('copy', 'build', () => {
    return spawn(cmd('electron'), args(), { stdio: 'inherit' }).on('close', exit);
}));


gulp.task('release', gulp.series('copy', 'build', () => {
    return spawn(cmd('electron-builder'), args(), { stdio: 'inherit' }).on('close', exit);
}));

gulp.task('test', gulp.series('copy', 'build', () => {
    return spawn(cmd('jest'), args(), { stdio: 'inherit' }).on('close', exit);
}));

На данный момент я даже не знаю, в чем проблема ... Пожалуйста, отправьте помощь!

Большое спасибо!

...