Reactjs 电子网页包反应错误“;模块分析失败:意外字符'@'&引用;
我正在使用Electron、Webpack和React处理这个项目。当我尝试构建项目时,我会出现以下错误:Reactjs 电子网页包反应错误“;模块分析失败:意外字符'@'&引用;,reactjs,webpack,electron,Reactjs,Webpack,Electron,我正在使用Electron、Webpack和React处理这个项目。当我尝试构建项目时,我会出现以下错误: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. @keyframes 错误总是指向节点\模块文件夹中的特定.css文件,此时会发生错误: @keyframes activeSwitchCircleAnimatio
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
@keyframes
错误总是指向节点\模块文件夹中的特定.css文件,此时会发生错误:
@keyframes activeSwitchCircleAnimation {
from {
left: 0;
} to {
left: 14px; }
}
@keyframes deactiveSwitchCircleAnimation {
from {
left: 14px;
} to {
left: 0; }
}
我已经研究了一系列“意外字符“@”错误问题,其中大多数问题都指向.sass或.scss文件中出现的错误,但这里的情况并非如此
这是网页包配置文件:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BabiliPlugin = require('babili-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const defaultInclude = path.resolve(__dirname, 'src')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
],
include: defaultInclude
},
{
test: /(\.scss|\.sass)$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
include: defaultInclude
},
{
test: /\.jsx?$/,
use: [{ loader: 'babel-loader' }],
include: defaultInclude
},
{
test: /\.(jpe?g|png|gif)$/,
use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
}
]
},
target: 'electron-renderer',
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'bundle.css',
chunkFilename: '[id].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new BabiliPlugin()
],
stats: {
colors: true,
children: false,
chunks: false,
modules: false
}
}
尝试删除
include:defaultInclude
,然后放置一个入口点。您的webpack.config文件应如下所示:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BabiliPlugin = require('babili-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const defaultInclude = path.resolve(__dirname, 'src')
module.exports = {
entry: defaultInclude,
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /(\.scss|\.sass)$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.jsx?$/,
use: [{ loader: 'babel-loader' }]
},
{
test: /\.(jpe?g|png|gif)$/,
use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }]
}
]
},
target: 'electron-renderer',
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'bundle.css',
chunkFilename: '[id].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new BabiliPlugin()
],
stats: {
colors: true,
children: false,
chunks: false,
modules: false
}
}