使用在反应组件中导入scss

Question

我正在尝试理解一个项目，在那里我发现了一种将样式应用于组件的有趣方法。我想知道使用这种类型的样式可以获得哪些优势。

**productRow.scss**

    #price{
        background-color:yellow;
    }

productRow.js

import PropTypes from 'prop-types';
import React from 'react';
import {price} from '../styles/productRow.scss';//Here extracted price from the styles file

const ProductRow = ({data}) =>{
    return(
        <div>
        <p >{data.name}-<span id={price}>{data.price}</span></p>
        </div>
);};

ProductRow.propTypes = {
    data: PropTypes.object,
    ToggleDetails: PropTypes.bool
};

export default ProductRow;