1. 首頁
  2. 問答
  3. 反應webpack scss關閉

反應webpack scss關閉

2016-04-23 91 views
0

我可能錯誤地滲透了教程，但我認爲你可以包括sccs文件在使用webpack的單個反應模塊內，並且只有scss中的css適用於該視圖。反應webpack scss關閉

所以，當我瀏覽到一個網頁，不包括<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

回答

1

這個庫允許你做它被稱爲CSS模塊。

它的工作原理是這樣

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

export default React.createClass({ 

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

});

爲了使用，你必須主動它的CSS模塊在你的WebPack配置

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

如果你想了解它，css-loader

來源

2016-04-24 00:49:35 QoP

+0

是你能夠用它定位整個頁面？而不僅僅是元素？ –

+0

你的意思是不使用classNames = {styles。**}？不，當您使用CSS模塊時，您的CSS名稱不再一樣，每種樣式都會更改爲唯一的名稱以使其成爲「本地」。 – QoP

+0

好吧，那就改變我需要做的一切的方式:)但謝謝你 –

相關問題

 相關問題