我正在构建一个通过使用socket.io使用客户端-服务器通信和服务器-谷歌云平台通信的应用程序。对于前端部分，我使用React，其中有两个组件App和Touch。将来我将更改项目结构，但是现在看起来像这样
我的项目结构如下：
nodemodulesFolder
publicFolder
jsFolder
client.js
socket.io.js
socket.io.js
socket.io.js.map
touch.js
viewFolder
App.js
index.css
Touch.js
index.js
routes.js
.dockerignore
.env
.gitignore
deployment.yaml
Dockerfile
index.js
ingress.yaml
Jenkinsfike
package.json
package-lock.json
server.js
webpack.config.js
我的CSS文件如下：
body {
font-family: sans-serif;
}
p {
color: black;
}
a {
font-weight: bold;
text-decoration: none;
color: #2a2a2a;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration: underline;
}
.wrapper {
width: 90vw;
padding-top: 100px;
margin: auto;
width: 50%;
margin-bottom: 160px;
}
.greyText {
opacity: 0.4;
}
.buttonWrapper{
margin: auto;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-top: 2px solid #ddd;
}
#ResultText {
width: 80vw;
margin-bottom: 100%;
overflow: auto;
}
#ResultText span {
display: inline-block;
margin-top: 10px;
}
#sessionSpeechData {
width: 80vw;
}
#sessionSpeechData span {
display: inline-block;
margin-top: 10px;
}
.nl-Adjective {
background-color: #1ada47;
padding: 3px;
border-radius: 5px;
}
.nl-Noun {
background-color: #151ffa;
padding: 3px;
border-radius: 5px;
color: white;
}
.nl-Verb {
background-color: #ff1616;
padding: 3px;
border-radius: 5px;
}
.hiddenForms {
opacity: 0.2;
}
h1 {
color: black;
}
/* ==========================================================================
Media Queries
========================================================================== */
/*========== Non-Mobile First Method ==========*/
/*Above */
@media only screen and (min-width: 1201px) {}
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {}
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {}
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {}
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
*, *:before, *:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after, a[href^="javascript:"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
.btn {
background-color: #4285f4;
color: #fff;
width:140px;
height:100px;
}
.btn:hover {
background-color: #296CDB;
}
.btn:focus {
background-color: #0F52C1;
outline: 0;
}
.btn:active {
background-color: #0039A8;
}
#startRecButton {
background-color: #1ada47;
margin-right:80px;
}
#startRecButton:hover {
background-color: #1ada47;
}
#startRecButton:focus {
background-color: rgb(62, 180, 38);
outline: 0;
}
#startRecButton:active {
background-color: rgb(64, 114, 44);
}
但是在编译时出现以下错误：
/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^
SyntaxError: /Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/public/views/index.css: Unexpected token, expected ; (1:5)
> 1 | body {
| ^
2 | font-family: sans-serif;
3 | }
4 |
at Parser.pp$5.raise (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp.semicolon (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:1742:38)
at Parser.pp$1.parseExpressionStatement (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:2236:8)
at Parser.parseExpressionStatement (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:5934:20)
at Parser.pp$1.parseStatement (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:1911:17)
at Parser.parseStatement (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:5910:22)
at Parser.pp$1.parseBlockBody (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/node_modules/babylon/lib/index.js:1673:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `webpack && node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/raulvilloravalencia/.npm/_logs/2018-09-28T10_17_39_236Z-debug.log
我的webpack.config.js文件如下：
'use strict'
module.exports = {
entry: __dirname + '/public/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
use:[ {loader: 'css-loader'} ]
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
答案 0 :(得分：3)
您还需要样式加载器
先安装样式加载器
npm install style-loader --save-dev
Webpack 3版本
{ test: /\.css$/,
use:[ {loader: 'style-loader!css-loader'} ]
}
webpack 4版本
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
答案 1 :(得分：0)
显示webpack.config.js的内容。似乎您缺少CSS /样式加载程序。 THIS应该可以帮助您正确设置它。
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}