如何在“react app 2”中设置 SCSS 文件（ViewEncapsulated 方式），如 Angular 组件特定的 SCSS？答案

【问题标题】：How can I setup SCSS files (ViewEncapsulated way) in 'react app 2' like Angular component specific SCSS?如何在“react app 2”中设置 SCSS 文件（ViewEncapsulated 方式），如 Angular 组件特定的 SCSS？
【发布时间】：2019-02-14 18:29:15
【问题描述】：

我安装了“react app 2”以及 node-sass。它与 SCSS 一起工作得很好。但我只想知道如何创建组件特定的 SCSS，如 Angular（永远不会与其他组件 SCSS 冲突）

Angular 自动为 ViewEncapsulation 添加一个属性，见下例

在角度中，有一个选项

encapsulation: ViewEncapsulation.None（用于禁用此组件的 CSS 封装） enter link description here

【问题讨论】：

您是否正在寻找一种自动化的方式来做到这一点？
不，不是。如果您能向我展示一种自动化的方式，将不胜感激。我只是找到一种自动或手动（任何方式）的方法
这需要点赞！你找到蚂蚁的工作了吗@SubhajitPanja？

标签： reactjs webpack sass

【解决方案1】：

我知道这个问题很老，但没有答案，因此我想分享this article。 Alsomst 可以解决问题，但它似乎不支持 ::ng-deep 之类的东西

【讨论】：

【解决方案2】：

React 没有像 Angular 那样的原生组件样式，因为它旨在避免任何可以被第三方包轻松处理的功能。所以你有两个非常简单的选择：

使用styled-components 创建特定于组件的样式。这是一个非常简单的包，它允许您为组件中的每个元素定义样式，甚至可以将变量传递给样式。它生成内部 CSS（保存在文档头部的<style> 标签中），默认情况下优先于外部样式。示例：
```
// MainComponent.jsx
import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: red
`

const MainComponent = (props) => <Title>Hello World</Title>
```

在您的每个组件中，将类或 ID 添加到根元素，以便您可以简单地将选择器添加到 SCSS 的开头以仅设置特定组件的样式。示例：

// MainComponent.jsx
import React from 'react';

const MainComponent = (props) => (
  <div className="main-component">
    <h1>Hello World</h1>
  </div>
)

// MainComponent.scss
.main-component {
  h1 {
    color: red;
  }
}

现在 MainComponent 中只有 h1 元素是红色的。

【讨论】：

"现在你的 MainComponent 中只有 h1 元素是红色的。"为什么它的子元素的 h1 元素也不会是红色的？
@JohnK h1 元素在 .main-component 中的任何位置都会显示为红色。

【解决方案3】：

//JS
import React from "react";
import "./yourComponentName.scss";

export default props => {
  const { className, children, ...restOperator } = props;
  
  return (
    <a className={`yourComponentName ${className}` } {...restOperator}>
      {children}
    </a>
  );
}

//yourComponentName.scss

.yourComponentName{
    position:relative;
    background:red;
    /* your property and value use nesting*/

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li { display: inline-block; }
    
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

【讨论】：