Visual Studio 代码和 Webpack答案

【问题标题】：Visual Studio Code and WebpackVisual Studio 代码和 Webpack
【发布时间】：2019-12-04 01:21:37
【问题描述】：

我有一个要导入到项目中的 _variables.scss 文件。然后我导出变量以使它们可用。

变量.scss

:root 
{
 --WebPartWidth: 900px;
}

现在我将它们导出到全局文件：

:export 
{
 WebPartWidth: #{var(--WebPartWidth)};
}

然后我将我所有的 SCC 和 SCSS 东西放在一起，并使用主样式表将它们导入到我的主类中：

import * as styles from './MasterCSS.module.scss';

这让我可以像这样引用它们：

styles.default.WebPartWidth

我遇到的问题是，该值是字符串“var(--WebPartWidth)”，而不是实际的基础值。

我对 webpack 以及如何配置甚至设置它一无所知，所以我想知道这是 webpack 正在做的事情还是我做错了什么？

任何帮助都会很棒！

谢谢

【问题讨论】：

标签： webpack visual-studio-code sass

【解决方案1】：

圣牛... 因此，经过大量阅读和测试，我想出了如何做我想做的事情。

这个想法是将我的 SCSS 全局变量与一些 CSS 变量挂钩，并能够通过更新 CSS 变量值在整个项目中级联更改。

环境：
1. Sharepoint Online -- 无 Javascript 框架
2. Visual Studio Code -- 最新
3. Typescript -- 最新
4. Gulp -- 3.9.1

目标：
允许用户通过属性窗格更改各种 CSS 属性。更改应在整个项目中级联。我需要能够做到这一点不搞乱 Webpack 或 gulpfile.js。

碎片：

映射值的自定义函数：
_Utility.scss

// map-value
// @access public
// @param {$key} -- Item to Map
@function map-value($key)
{
  @if type-of($key) == "string"
  {
     @return to-string($key);
  }
  @else
  {
     @return val($key);
  }
}

@function to-string($key)
{
   @return inspect( val($key) );
}

@function val($key)
{
  // Return value:
  @return var($key);
}

-- EOF

_Variables.scss
我把这些放在文件的顶部。

$WebPartWidth: 900px;
$WebPartMinimumWidth: 800px;
$WebPartMaximumWidth: 1000px;

$WebPartHeight: 500px;
$WebPartMinimumHeight: 400px;
$WebPartMaximumHeight: 600px;

接下来我创建我的 CSS 变量并将它们链接到 SCSS 变量。

:root
{
  --WebPartWidth: #{$WebPartWidth};
  --WebPartMinimumWidth: #{$WebPartMinimumWidth};
  --WebPartMaximumWidth: #{$WebPartMaximumWidth};

  --WebPartHeight: #{$WebPartHeight};
  --WebPartMinimumHeight: #{$WebPartMinimumHeight};
  --WebPartMaximumHeight: #{$WebPartMaximumHeight};
}

-- EOF

现在，我创建我的全局文件。

Global.module.scss

@import './Variables';

:export
{
  WebPartWidth: #{$WebPartWidth};
  WebPartMinimumWidth: #{$WebPartMinimumWidth};
  WebPartMaximumWidth: #{$WebPartMaximumWidth};

  WebPartHeight: #{$WebPartHeight};
  WebPartMinimumHeight: #{$WebPartMinimumHeight};
  WebPartMaximumHeight: #{$WebPartMaximumHeight};
}

-- EOF

最后，我将它们整合到我的主 CSS 文件中。

Webpart.module.scss

// Import our functions:
@import "./Utility";

// Import our Global Variables:
@import "./Global.module.scss";

.Webpart {
  width: map-value(--WebPartWidth);
  min-width: map-value(--WebPartMinimumWidth);
  max-width: map-value(--WebPartMaximumWidth);
  height: map-value(--WebPartHeight);
  min-height: map-value(--WebPartMinimumHeight);
  max-height: map-value(--WebPartMaximumHeight);
}

-- EOF

在我的打字稿文件中
Webpart.ts

import * as styles from './WebPart.module.scss';

现在，我可以像这样调整值：

document.body.style.setProperty('--WebPartWidth', newValue + "px");

现在，任何引用 --WebPartWidth CSS 变量的内容都会更新并应用新值。

我真的希望这对某人有所帮助。我知道我花了很长时间试图弄清楚这一点。编码愉快！

【讨论】：