导入CSS样式到一个反应JS应用
问题描述:
我有一个进口的CSS样式表故障反应基本的应用程序,我有这样的成分:导入CSS样式到一个反应JS应用
AvatarHeader.js:
import styles from './AvatarHeader.css';
export default function AvatarHeader({ style, children }) {
return (
<div>
<img style={styles.image} src={Background} alt="background">
{ children }
</img>
AvatarHeader.css:
.image {
width: 400
}
AvatarHeader.js & AvatarHeader.css位于同一个文件夹中。
的package.json:
{
"name": "UtWeb",
"version": "0.1.0",
"private": true,
"devDependencies": {
"css-loader": "^0.25.0",
"react-scripts": "0.9.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.9.0"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^4.3.0",
"react-router": "^2.0.0",
"redux": "^3.2.1",
"react-router-redux": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
样式不应用在组件上,但如果我重写AvatarHeader.js所以它的工作原理:
import styles from './AvatarHeader.css';
const image = {
width: 400
}
export default function AvatarHeader({ style, children }) {
return (
<div>
<img style={image} src={Background} alt="background">
{ children }
</img>
我不知道如何解决这个错误使用第一种方式导入css文件。
不会导入CSS文件,并使用它像一个对象。你只需要输入没有名字的文件只是为了副作用,然后把.image类给img。 – Li357
你可能会尝试使用['css-object-loader'](https://github.com/pl12133/css-object-loader)而不是'css-loader',因为它会给你一个对象而不是加载全局CSS(这是'css-loader'的作用)。 – Frxstrem