Sass使用其他.scss文件中的类名

大家好

我试图找出是否有一种方法可以链接.scs，使它们共享类名

这就是我想要实现的目标

|- theme
|   |- theme_default.scss
|- snippets
|   |-componentA
|   |   |-componentA.js
|   |   |-componentA.scss

在

ComponentA.js

文件中，我使用css加载程序/CommonJS将

ComponentA.scss

中的类附加到组件上（如果有人需要知道，我使用的是webpack开发环境）

在

主题\u default.scss

中，我试图将主题样式应用于“ComponentA”。默认的主题文件应该可以被其他主题文件交换

问题在于，类名（尽管在源文件中相同）在编译成常规的“.css”文件时会被散列，这意味着主题cssfile中的类名永远不会与ComponentA cssfile中的类名匹配

那么，我如何才能明确主题文件应该使用与组件文件相同的类名，而不将样式声明为

global

？我尝试在主题文件中使用

@import

和

@use

，但它只复制规则，而类名仍然不相同

欢迎任何输入，提前感谢阅读

编辑

---

应要求提供一些例子

theme_default.scss

.theme\u默认值{
.comp_a/*此类应与组件a.scss*中的类相同（散列）{
背景色：红色；/*完全相同，但只是为了举例*/
}
}

成分a.scss

.comp\u a{
显示器：flex；
柔性包装：无包装；
/*……等等*/
}

组件a.js

从“./componentA.scss”导入样式
//这就是我设置样式的方式，但是这个类不知道任何主题样式表。所以从这里什么也做不了
元素.classList.add（style.comp_a）；

要应用主题，我将

theme\u default

类（散列版本）设置为根元素，并让浏览器了解如何高效（重新）渲染它

我读到css加载器有一个带有

compose（s）

的机制，这可能会解决这个问题。但它似乎既不适用于网页包，也不适用于vsCode。因此，在任何情况下，如果有人需要它，下面是webpack配置文件中有关css处理的片段

webpack.configuration.js

{
测试：/\.s[ac]ss$/i，
包括：[
解析（uu dirname，'src'）
],
排除：[
解析（uuu dirname，'node_modules'），
解析（uuu dirname，'build'），
解析（uuu dirname，'test'），
],
使用：[
//从JS字符串创建'style'节点
isDevelopment？“样式加载器”：MiniCssExtractPlugin.loader，
//将CSS转换为CommonJS
{
加载器：“css加载器”，
选项：
{
模块：
{
exportGlobals：没错，
},
进口装载机：2，
源地图：isDevelopment，
}
},
//转换URL
{
加载程序：“解析url加载程序”，
选项：
{
sourceMap:isDevelopment
}
},
//将Sass编译为CSS
{
加载器：“sass加载器”，
选项：
{
sassOptions：
{
宽度：4，
源地图：isDevelopment，
sourceMapContents:false，
outputStyle:“扩展”
},
},
}
],
},

使用CSS模块时，主题化有点棘手，因为它的目的是创建不受CSS级联影响的局部范围的CSS

也就是说，根据你想走的路线，你有一些选择

---

参数/道具主题化 因为CSS模块不希望受到级联的影响，所以很难通过使用DOM树中较高的类名来更改组件级CSS。CSS模块项目确实有一个新的功能，但我认为它与您尝试实现样式的方式有点不同。不过，我还是鼓励你考虑一下。

他们的方法是为每个组件创建一个主题样式表，然后将它们导入到所述组件中，根据变量切换要使用的样式表。在React中，这将是一个

属性

dark.css

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

neon.css

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

。按钮{
边框：1px实心#0f0；
}

Button.js

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

导出默认类按钮{
构造器（主题）{
this.theme=主题；
}
render（）{
const theme=this.theme；
返回“你好，世界”；
}
}

app.js

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

这种方法更倾向于传统的CSS模块方法，在这种方法中，您将在源代码中复制一些样式，但您通过减少向客户机交付的内容来弥补

与Sass一起使用 由于您使用的是Sass，您可以通过使用Sass来减少将来更改内容的重复性和繁琐性

如果您有一组CSS属性，这些属性在使用它们的许多组件中都是通用的（

背景色

，

边框色

，等等），并且允许您将这些规则集中到一个文件中，在该文件中可以更改并传播到其他文件中，这一点尤其有用

主题。scss

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

@mixin霓虹灯{
背景色：#0f0；
边框：2px实心#ff0；
颜色：#000；
}

按钮/neon.scss

.button {
  border: 1px solid #333;
}

import darkTheme from "./dark.css";
import neonTheme from "./neon.css";

import Button from "./button";

// use component
new Button(dark);
new Button(neon);

。按钮{
@包括霓虹灯；
}
//或者，如果您使用的是最新的Dart Sass及其@use规则
@使用“主题”；
.按钮{
@包括主题。霓虹灯；
}

这仍然要求您将主题设置为应用程序变量，并将其作为arg或prop传递，但应该减少复制t的需要