javascript - Electron 中 React Express 应用程序的 CSS 在所有导入的 CSS 模块的代码上引发 SyntaxError

Question

我正在制作一个基于 React-Express 的应用程序，我最近意识到它与 Electron 结合起来会更贴切。为此，我将之前的代码集成到了这个框架中https://github.com/lukeandersen/react-electron-express-starter。main.js通过在之前调用的开头启动 Express 服务器electron.js，并在其中添加一个renderer.js文件，index.html我能够呈现 React 部分。虽然 JSX 代码是在所有 CSS 导入被删除时呈现的，但这个最有可能的 webpack 错误会根据以下内容对似乎每个现有的第一个非字母数字字符做出反应。每当 :root 的语句被删除时，它只会在下一个“{”处导致错误

这些 CSS 文件放置在它们各自的 JSX 文件之外，因此maincomponentstyle.css与 MainComponent.jsx 处于同一级别，由于其余组件仅在其中使用，因此与文件夹具有相同的名称。

Uncaught 
C:\Users\Admin\Project\app\components\MainComponent\maincomponentstyle.css:1

(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { :root{
                                                                                                                                                           ^

SyntaxError: Unexpected token ':'
    at new Script (vm.js:84:7)
    at createScript (vm.js:258:10)
    at Object.runInThisContext (vm.js:306:10)
    at Module._compile (internal/modules/cjs/loader.js:883:26)
    at Module._extensions..js (internal/modules/cjs/loader.js:1004:10)
    at Object.newLoader [as .js] (C:\Users\Admin\Project\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:852:19)

终端注册的内容：

GET /calendar 304 1.637 ms - -

// Interestingly the <link rel="stylesheet" href="index.css"> in index.html loads perfectly
GET /index.css 304 1.999 ms - -
GET /app.bundle.js 304 1.752 ms - -

// These three are the css-files as three JSX files import one CSS file each
GET /index.js.map 404 1.317 ms - 151 

GET /index.js.map 404 0.815 ms - 151

GET /index.js.map 404 0.743 ms - 151

package.json 的样子：

{
  "name": "electron_app",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "webpack --watch && electron .",
    "build": "rimraf ./public && mkdir public && webpack --progress -p"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "8.2.1",
    "concurrently": "5.3.0",
    "copy-webpack-plugin": "6.3.2",
    "css-loader": "3.6.0",
    "electron": "9.3.1",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "4.5.0",
    "postcss": "7.0.32",
    "postcss-cssnext": "3.1.0",
    "postcss-import": "12.0.1",
    "postcss-load-config": "2.1.0",
    "postcss-loader": "3.0.0",
    "postcss-nesting": "7.0.1",
    "rimraf": "3.0.2",
    "style-loader": "1.2.1",
    "url-loader": "4.1.0",
    "webpack": "4.43.0",
    "webpack-cli": "3.3.12"
  },
  "dependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/node": "^7.14.7",
    "@babel/register": "^7.14.5",
    "axios": "^0.21.1",
    "babel-jest": "^27.0.6",
    "babel-preset-react": "^6.24.1",
    "classnames": "2.2.6",
    "dotenv": "8.2.0",
    "express": "4.17.1",
    "morgan": "^1.10.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-router-dom": "^5.2.0",
    "regenerator-runtime": "^0.13.7"
  },
  "electronWebpack": {
    "whiteListedModules": [
      "codemirror",
      "vickymd"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "postcss": {
    "plugins": {
      "postcss-import": {},
      "postcss-cssnext": {
        "browsers": [
          "last 2 versions",
          "> 5%"
        ]
      },
      "postcss-nesting": {}
    }
  }
}

renderer.jsindex.html 中的' d 的内容require感谢 main.js' webPreferences:{nodeIntegration:true}

require('@babel/register'); // When this one is removed JSX isn't recognized... so maybe a required here is required?
// require("css-loader") did not help here
require("./app/index"); // Opens what React.DOMs the index.html

webpack.config.js：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        app: './app/index.js'
    },
    output: {
        filename: 'app.bundle.js',
        path: path.resolve(__dirname, './public'),
        publicPath: '/'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }, {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader', 'postcss-loader'],
        }, {
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            loader: 'file-loader?limit=8192&name=assets/[name].[ext]?[hash]'
        }]
    },
    plugins: [
        /*new HtmlWebpackPlugin({
            template: './app/index.ejs'
        }),*/
        new CopyWebpackPlugin({
            patterns: [
                { from: './app/favicon.ico' },
                { from: './app/assets', to: 'assets' }
            ],
        })
    ],
    devtool: 'eval'
};

在 renderer.js 中是否需要一个模块来解决这个问题？

标签： javascriptreactjsexpresswebpackelectron