Question

我可能错误地插入了教程，但我认为您可以使用webpack将sccs文件包含在单个react模块中，并且仅css中的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正在全球范围内应用。

Answer 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

反应webpack scss关闭

1 个答案: