在SPFx中能否将Web Part属性值传递到CSS/SCSS文件中使用？

首先给出明确结论：无法直接将运行时动态配置的Web Part属性（如你提到的divWidth）直接传递到SCSS文件中使用。
核心原因是SCSS属于预编译语言，所有SCSS代码会在项目打包构建阶段就被编译为固定的静态CSS文件，打包完成后样式内容就不会再变化。而divWidth这类Web Part配置属性是用户在SharePoint页面编辑阶段设置的运行时动态值，不可能提前注入到构建阶段就已经编译完成的样式文件里。

如果想要实现样式统一在SCSS中管理、同时支持动态应用配置属性的效果，可以用CSS自定义属性（CSS变量）实现，效果和你预期的直接传值到SCSS一致，实现步骤如下：

实现步骤 #

• 在SCSS文件中定义使用CSS变量的样式，可同时设置默认值兜底

.targetDiv {
  /* 第一个参数是自定义变量名，第二个是未传入变量时的默认值 */
  width: var(--webpart-div-width, 300px);
  // 其他样式规则
}

• 在Web Part的运行时代码中，读取配置属性后动态注入CSS变量
  以React版本的SPFx开发为例，可在render方法中给Web Part根DOM节点设置变量：

public render(): void {
  // 给当前Web Part的根DOM节点设置CSS变量
  this.domElement.style.setProperty('--webpart-div-width', this.properties.divWidth);

  const element = React.createElement(
    YourComponent,
    { /* 组件Props */ }
  );
  ReactDOM.render(element, this.domElement);
}

• 给目标div应用SCSS中定义的.targetDiv类即可，宽度会自动适配你配置的divWidth值

这种方案的样式逻辑依然统一在SCSS文件中管理，可维护性比直接写内联样式更高，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Pete Whelan