Я работаю над проектом с использованием React, Electron и Typescript и застрял в середине процесса распространения, потому что я не могу правильно включить CSS. Я использую electron-rebuild и webpack для комплектации и сборки.
webpack.config. js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = [
{
node: {
__dirname: false,
},
mode: 'development',
entry: './src/electron.ts',
target: 'electron-main',
devtool: 'source-map',
module: {
rules: [
{
test: /\.ts$/,
include: /src/,
use: [{ loader: 'ts-loader' }],
},
],
},
output: {
path: __dirname + '/build',
filename: 'electron.js',
},
externals: {
knex: 'commonjs knex',
// sqlite3: 'commonjs sqlite3'
},
},
{
mode: 'development',
entry: './src/react.tsx',
target: 'electron-renderer',
devtool: 'source-map',
module: {
rules: [
{
test: /\.ts(x?)$/,
include: /src/,
use: [{ loader: 'ts-loader' }],
},
{
test: /\.css$/,
include: [/src/, /node_modules/],
use: [
'css-loader',
],
},
],
},
output: {
path: __dirname + '/build',
filename: 'react.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
},
]
Используя эти настройки, я создаю electron.js для основного процесса и react.js для процесса визуализации. В компоненте TableView я использую import ....css следующим образом:
TableView.tsx
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css'
import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css'
import './styles.css'
const TableView: React.FC<ITableViewProps> = ({ ... }) => {
...
}
...
и в сгенерированном файле react.js я могу найти следующую часть, поэтому я думаю, что он содержит содержимое CSS файлов.
var react_1 = __importStar(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
__webpack_require__(/*! @ag-grid-community/all-modules/dist/styles/ag-grid.css */ "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.css");
__webpack_require__(/*! @ag-grid-community/all-modules/dist/styles/ag-theme-balham.css */ "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css");
__webpack_require__(/*! ./styles.css */ "./src/Views/styles.css");
...
/***/ "./src/Views/styles.css":
/*!******************************!*\
!*** ./src/Views/styles.css ***!
\******************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".recommended {\r\n background-color: yellow !important;\r\n}\r\n", ""]);
// Exports
module.exports = exports;
/***/ }),
И файл index.html в каталоге build содержит <script type="text/javascript" src="react.js"></script>, поэтому я ожидал, что он будет работать без добавления тегов <link> для файлов css. Но это работает не так, как я ожидал, и когда я добавляю тег <link> в файл index.html дополнительно, он работает. Однако, когда я пытаюсь собрать приложение в рабочем режиме, этот трюк не работает, потому что файл asar не включает эти CSS файлы, хотя я оставляю теги <link>. Итак, я хочу исправить это, заставив работать так, как это должно быть, когда я делаю react.js с вышеуказанными настройками веб-пакета. Кто-нибудь сталкивался с этой проблемой? Я уже гуглил и нашел некоторые решения, но у меня ничего не получалось.
{
"name": "0207",
"version": "1.0.0",
"description": "",
"main": "./build/electron.js",
"scripts": {
"start": "npm run build && electron ./build/electron.js",
"build": "npm run rebuild && webpack --config ./webpack.config.js",
"rebuild": "electron-rebuild -f -w sqlite3",
"execute": "electron ./build/electron.js",
"pack": "npm run build && electron-builder --dir",
"dist": "npm run build && electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"appId": "app-win32-x64",
"asar": false,
"files": [
"./build/**/*",
"./node_modules/**/*"
],
"electronDownload": {
"cache": "./"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/knex": "^0.16.1",
"@types/node": "^13.13.4",
"@types/prop-types": "^15.7.3",
"@types/qs": "^6.9.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.7",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"@types/sequelize": "^4.28.8",
"@types/sqlite3": "^3.1.6",
"concurrently": "^5.1.0",
"css-loader": "^3.4.2",
"electron": "^8.2.5",
"electron-builder": "^22.6.0",
"electron-devtools-installer": "^2.2.4",
"electron-is-dev": "^1.1.0",
"electron-prebuilt-compile": "8.2.0",
"electron-rebuild": "^1.10.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"typings-for-css-modules-loader": "^1.7.0",
"wait-on": "^4.0.0"
},
"dependencies": {
"@ag-grid-community/all-modules": "^22.1.1",
"@ant-design/icons": "^4.1.0",
"ag-grid-community": "^23.0.2",
"ag-grid-react": "^23.0.3",
"antd": "^4.1.5",
"async-csv": "^2.1.3",
"axios": "^0.19.2",
"csv-parser": "^2.3.2",
"csv-writer": "^1.6.0",
"electron-better-ipc": "^1.0.0",
"electron-promise-ipc": "^2.1.0",
"electron-squirrel-startup": "^1.0.0",
"electron-window-manager": "^1.0.6",
"knex": "^0.21.1",
"node-abi": "^2.16.0",
"prop-types": "^15.7.2",
"qs": "^6.9.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"redux-undo": "^1.0.1",
"sqlite3": "^4.1.1",
"string-similarity": "^4.0.1",
"typesafe-actions": "^5.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"xlsx": "^0.15.5"
},
}