Javascript 在使用Webpack’；什么是局部范围？

我正在使用创建CSS类，这些类的作用域是它们所属的组件

我有一个

React组件，看起来像这样：

Icon.js

'use strict';

var React = require('react')
var styles = require('./Icon.css')

module.exports = React.createClass({

    propTypes: {
        iconName: React.PropTypes.string.isRequired,
        height: React.PropTypes.number,
        width: React.PropTypes.number,
        classes: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            iconName: 'cloud',
            height: 36,
            width: 36,
            classes: ''
        };
    },

    render() {

        var iconSize = {
            height: this.props.height + 'px',
            width: this.props.width + 'px'
        }

        return (
            <i className={this.props.classes + ' ' + styles[this.props.iconName]} style={iconSize} />
        )
    }
})

.base {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
.cloud {
    composes: base;
    background-image: url("./images/cloud.svg");
    transform: translate3d(0, -12px, 0);
}
.apps {
    composes: base;
    background-image: url("./images/apps.svg");
    transform: translate3d(0, -11px, 0);
}

'use strict';

var React = require('react')
var styles = require('./Capsule.css')

var Icon = require('../Icon/Icon.jsx')

module.exports = React.createClass({

    propTypes: {
        clickable: React.PropTypes.bool.isRequired,
        iconName: React.PropTypes.string,
        label: React.PropTypes.string,
        cta: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            clickable: true,
            iconName: '',
            label: '',
            cta: ''
        };
    },

    render() {
        return (
            <div className={styles.withIcon}>
                {this.props.iconName ? <Icon classes={styles.icon} iconName={this.props.iconName} /> : ''}
                {this.props.label ? <span className={styles.label} dangerouslySetInnerHTML={{__html: this.props.label}} /> : ''}
                {this.props.children}
                {this.props.cta ? <span className={styles.cta}>{this.props.cta}</span> : ''}
            </div>
        )
    }
})

.icon {
    left: 31px;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.base {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
    color: rgb(114, 110, 101);
    font-size: 11px;
    margin-top: 24px;
    min-height: 54px;
    padding: 20px;
    position: relative;
}
.base + .base { margin-top: 8px; }
.clickable {
    composes: base;
    cursor: pointer;
}
.withIcon {
    composes: base;
    padding-left: 62px;
}
.label {}
.cta {
    color: rgb(216, 213, 210);
}

我把它拉到另一个名为

的组件中，在那里我需要以特定于

组件的方式定位它

Capsule.js

'use strict';

var React = require('react')
var styles = require('./Icon.css')

module.exports = React.createClass({

    propTypes: {
        iconName: React.PropTypes.string.isRequired,
        height: React.PropTypes.number,
        width: React.PropTypes.number,
        classes: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            iconName: 'cloud',
            height: 36,
            width: 36,
            classes: ''
        };
    },

    render() {

        var iconSize = {
            height: this.props.height + 'px',
            width: this.props.width + 'px'
        }

        return (
            <i className={this.props.classes + ' ' + styles[this.props.iconName]} style={iconSize} />
        )
    }
})

.base {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
.cloud {
    composes: base;
    background-image: url("./images/cloud.svg");
    transform: translate3d(0, -12px, 0);
}
.apps {
    composes: base;
    background-image: url("./images/apps.svg");
    transform: translate3d(0, -11px, 0);
}

'use strict';

var React = require('react')
var styles = require('./Capsule.css')

var Icon = require('../Icon/Icon.jsx')

module.exports = React.createClass({

    propTypes: {
        clickable: React.PropTypes.bool.isRequired,
        iconName: React.PropTypes.string,
        label: React.PropTypes.string,
        cta: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            clickable: true,
            iconName: '',
            label: '',
            cta: ''
        };
    },

    render() {
        return (
            <div className={styles.withIcon}>
                {this.props.iconName ? <Icon classes={styles.icon} iconName={this.props.iconName} /> : ''}
                {this.props.label ? <span className={styles.label} dangerouslySetInnerHTML={{__html: this.props.label}} /> : ''}
                {this.props.children}
                {this.props.cta ? <span className={styles.cta}>{this.props.cta}</span> : ''}
            </div>
        )
    }
})

.icon {
    left: 31px;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.base {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
    color: rgb(114, 110, 101);
    font-size: 11px;
    margin-top: 24px;
    min-height: 54px;
    padding: 20px;
    position: relative;
}
.base + .base { margin-top: 8px; }
.clickable {
    composes: base;
    cursor: pointer;
}
.withIcon {
    composes: base;
    padding-left: 62px;
}
.label {}
.cta {
    color: rgb(216, 213, 210);
}

您将看到我在这里呈现

组件中的

组件，并且我正在传递

类

属性。这是因为我需要使用

Capsule.css

中的本地作用域

.icon

类将

正确定位在

中。它现在运行得很好，但我不确定这是否理想，甚至不确定这是正确的方式

结果截图：

改进建议？真的非常感谢我能得到的任何帮助