小编Ver*_* C.的帖子

Codesanbox链接-包括工作组件 Child2.js 和工作测试 Child2.test.js

Child2.js

import React, { useRef } from "react";

export default function Child2() {
  const divRef = useRef();

  function getDivWidth() {
    if (divRef.current) {
      console.log(divRef.current);
    }
    return divRef.current ? divRef.current.offsetWidth : "";
  }

  function getDivText() {
    const divWidth = getDivWidth();

    if (divWidth) {
      if (divWidth > 100) {
        return "ABC";
      }
      return "123";
    }

    return "123";
  }

  return (
    <>
      <div id="myDiv" ref={divRef}>
        {getDivText()}
      </div>
      <p>Div width is: {getDivWidth()}</p>
    </>
  );
}

Child2.test.js

import …

对 webpack 非常陌生...我希望能够读取一个值，在这种情况下，特别是文件中envfrom的值，因此我可以根据环境使用不同的 css。webpack.config.jssass

例如：

• env = 发展，颜色 = 绿色
• env = 生产，颜色 = 蓝色

到目前为止，我一直专注于 sass-loader，试图传递数据，但没有奏效，$env我运行时变量始终未定义npm run build:Debug（此运行webpack --app=all --env=development）。

这些是我拥有的文件：

webpack.config.js

const path = require("path");
const common = require("./.webpack/webpack.common.config");

const config = [];

function addAppConfig(app) {
    app.module = common.module;
    app.resolve = common.resolve;
    config.push(app);
}

module.exports = (env, argv) => {
    switch (argv.app) {
    // Add new configs to below
    case "a":
        addAppConfig(aa);
        break;

    case "b":
        addAppConfig(bb);
        break;

    case …