导入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文件。

来源

2017-03-01 Sebastian Gulino

不会导入CSS文件，并使用它像一个对象。你只需要输入没有名字的文件只是为了副作用，然后把.image类给img。 – Li357

你可能会尝试使用['css-object-loader']（https://github.com/pl12133/css-object-loader）而不是'css-loader'，因为它会给你一个对象而不是加载全局CSS（这是'css-loader'的作用）。 – Frxstrem

import './AvatarHeader.css';` 
<img className='image' />`

是正确的语法

来源

2017-03-01 22:32:31 paqash

完美！这是有效的，但另一个问题，如果我有另一个导入的css文件与'图像'类通过什么。我如何定义在哪里使用这个类？ –

如果您使用的是webpack和css-loader，您可以定义范围。更多信息在这里：https://github.com/webpack-contrib/css-loader#css-scope – paqash

这个导入CSS全球？或只是为了组件？ – stackdave

导入CSS样式到一个反应JS应用

回答

相关问题