Sass CSS模块，嵌套类中的组合

我正在从事一个项目，其中有一个用于许多组件的main style.scss文件。我想重新构造代码，使每个组件都有自己的文件夹（index.js、styles.scss）。有一个嵌套类正在使用另一个组件中的类，现在我必须分离所有样式，这部分被破坏了。我不能使用composition，因为它是嵌套类。我还可以采取哪些其他方法

代码如下所示：

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

// ComponentA/styless.scss

.component-a-class {
  ...
}

// ComponentB/styless.scss 

.component-b-class{
    @import "../ComponentA/styless.scss"
}

// ComponentB/styless.css (compiled)

.component-a-class {
  width: 100px;
}

.component-b-class .component-a-class {
  width: 500px;
}

使用Sass指令导入外部类。您的代码将如下所示：

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

// ComponentA/styless.scss

.component-a-class {
  ...
}

// ComponentB/styless.scss 

.component-b-class{
    @import "../ComponentA/styless.scss"
}

// ComponentB/styless.css (compiled)

.component-a-class {
  width: 100px;
}

.component-b-class .component-a-class {
  width: 500px;
}

这将把

.component-a-class

作为嵌套规则注入

.component-b-class

---

编辑：要导入样式并能够修改其属性值之一，必须使用Sass：

这会让你得到你想要的，尽管这并不理想。生成的编译后的

ComponentB/styless.css

文件将包括

ComponentA/styless.scss

中写入的所有内容，因为

@import

指令是一个“全部或无”功能（没有选择性导入）。结果如下所示：

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

// ComponentA/styless.scss

.component-a-class {
  ...
}

// ComponentB/styless.scss 

.component-b-class{
    @import "../ComponentA/styless.scss"
}

// ComponentB/styless.css (compiled)

.component-a-class {
  width: 100px;
}

.component-b-class .component-a-class {
  width: 500px;
}

---

这似乎不起作用。我忘了提到，我还想将整个component-a-class的宽度从component-b-classUpdated更改为包含进一步的说明。试着看这个