我正在尝试将CSS文件导入React应用,但我所拥有的只是
模块解析失败:意外令牌(1:6)您可能需要适当的加载程序来处理此文件类型,当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders
我尝试了所有方法,包括与此主题有关的其他StackOverflow问题,但没有一个对我有用
我的React代码:
import React from 'react'
import './components/App.css'
class App extends React.Component {
render() {
return (
<div className='container'>
<title>
Chamados
</title>
<section className='main-wrapper'>
<header>
<h1>LOGIN</h1>
</header>
<form>
<input type="text" name="user" id="user" placeholder='Usuário' focus autoComplete='no'/>
<input type="password" name="pass" id="pass" placeholder='Senha'/>
<input type="submit" value="SIGN IN" id='bSignIn'/>
</form>
</section>
</div>
)
}
}
export default App
我的CSS代码:
header{
text-align:center;
margin-top:30%
}
.container{
margin:0px;
padding:0px
}
.main-wrapper{
height:450px;
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-image: linear-gradient(#FFFAF0,#E6E6FA);
align-items: center;
border-radius:5px;
box-shadow: 1px 1px 15px #b3b3b3 !important;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
input[type = "text"], input[type = "password"]{
height:30px;
width:250px;
border: none;
outline:none;
border-radius: 0;
background:none;
display:block;
margin: 20px auto;
text-align:center;
border-bottom:2px solid #adadad;
}
#bSignIn{
outline:none;
border: 0 none;
border-radius: 0;
height:50px;
width:250px;
background-image: linear-gradient(to right,#ADD8E6,#E0FFFF)
}
似乎您的Webpack配置缺少一个CSS加载器,因此它不知道如何处理要导入的CSS文件。
确保在项目中安装了css-loader:
npm install --save-dev css-loader
然后将css-loader
添加到您的Webpack配置文件:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};