反应webpack scss关闭

我可能错误地渗透了教程，但我认为你可以包括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

这个库允许你做它被称为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

是你能够用它定位整个页面？而不仅仅是元素？ –

你的意思是不使用classNames = {styles。**}？不，当您使用CSS模块时，您的CSS名称不再一样，每种样式都会更改为唯一的名称以使其成为“本地”。 – QoP

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

反应webpack scss关闭

回答

相关问题