導入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應用

回答

相關問題