webpack scss closures

私はチュートリアルを間違って解釈している可能性がありますが、sccsファイルをwebpackを使用して1つの反応モジュールに含めることができ、scssからのcssのみが該当します。webpack scss closures

私は<Index />が含まれていないページに移動するときそれではIndex.scssが<head>

ページ内にレンダリングされないIndex.js

import React from "react"; 
import '../../scss/pages/Index.scss' 
//^^ This is the individual styles that I would like to be shown on the <Index /> 

export default React.createClass({ 

    render(){ 
     return (
      <NavLink to="/Home"> 
       <Logo /> 
      </NavLink> 
     ); 
    } 

});

しかしIndex.scss世界的に定着しています。

出典

2016-04-23 Jamie Hutber

CSSモジュールと呼ばれるライブラリです。

それはあなたがそれについて読みたい場合は、あなたのWebPACK構成

module: { 
    loaders: [ 
    { 
     test: /\.scss$/, 
     loader: 'style!css?modules!sass' 
    }] 
}

で、それはアクティブにあなたが持っているCSSモジュールを使用するためには、この

import styles from '../../scss/pages/Index.scss' 

export default React.createClass({ 

    render(){ 
     return (
      <header className={styles.header}> 
      </header> 
     ); 
    } 

});

のように動作し、css-loader

出典

2016-04-24 00:49:35 QoP

がありますページ全体をターゲットに設定できますか？ただの要素ではなく？ –

classNames = {styles。**}を使用しないと意味しますか？いいえ、CSSモジュールを使用する場合、CSS名は同じではなく、すべてのスタイルが固有の名前に変更されてローカルになります。 – QoP

ああ、それは私がすべてを行う必要がある方法を変更:)しかし、ありがとう –

答えて

関連する問題