Question

首先，我想说声对不起，因为我觉得我对此问题缺乏理论背景，但是现在我被困在这里了。

我想只用处理浏览器窗口创建的常规main.js入口点来设置Electron应用程序。我想创建多个不同的窗口，所以我在Internet上找到的样板版对我没有好处。

因此，我的main.js使用.html文件创建一个窗口，该文件使用脚本标签添加其渲染器，该渲染器仅设置了这样的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来编译我的代码，在我添加代码之前一切正常

导入'./ReactComponent.css';

哪个抛出此错误：

未捕获到的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);
}));

这时我什至不知道问题出在哪里...请发送帮助！

非常感谢！

React组件中的CSS导入在Electron应用程序中不起作用

0 个答案: