导入的@value 值未定义答案

【问题标题】：Imported @value values are undefined导入的@value 值未定义
【发布时间】：2022-01-17 08:20:53
【问题描述】：

我们正在尝试将我们的 React 应用程序的一部分构建到一个库中以供业务合作伙伴使用。原始的 React 应用程序是一个 Create React App 应用程序，我们试图在不弹出应用程序的情况下实现这一点。

我们已经为应用程序创建了一个新入口点，并且正在使用 Webpack 构建一个捆绑应用程序。我们目前遇到的问题是，当我们尝试在组件中引用 @value 值时，它们是未定义的。

代码

侧边栏/styles.module.css

@value sidebarOptionsWidth: 64px;
@value sidebarExpandedWidth: 384px;
...

相关组件代码

import {
  sidebarOptionsWidth,
  sidebarExpandedWidth
} from "../sidebar/style.module.css";
...
const sidebarWidth = isSidebarExpanded
      ? sidebarExpandedWidth
      : sidebarOptionsWidth;
Number(sidebarWidth.replace("px", "")); // <-- This errors due to value being undefined
...

webpack.config.js

const path = require("path");
const Dotenv = require("dotenv-webpack");
const TerserPlugin = require("terser-webpack-plugin");

const config = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    filename: `bundle.min.js`,
    library: "TheLibrary",
    libraryTarget: "var",
    path: path.join(__dirname, "build/static/js")
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          plugins: ["@babel/plugin-proposal-class-properties"]
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["postcss-modules-values"]
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(gif|jpg|png|svg)$/,
        use: ["url-loader"]
      },
      {
        test: /\.mp4$/,
        use: "file-loader?name=videos/[name].[ext]"
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  },
  plugins: [
    new Dotenv({
      path: "./.env.dev",
      systemvars: true
    })
  ]
};

module.exports = (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "eval-cheap-module-source-map";
  }

  return config;
};

错误

如果我们忽略警告，我们会收到 webpack 警告和运行时错误。

webpack 构建警告

"export 'sidebarOptionsWidth' was not found in '../sidebar/style.module.css'

运行时错误

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

问题

据我了解，postcss-modules-values 应该对此有所帮助，但是，我不确定我们是否正确配置了它？或者它配置正确并且我们在这里做错了什么？

【问题讨论】：

标签： css reactjs webpack-4 postcss postcss-loader

【解决方案1】：

我现在已经设法克服了。更新 style-loader 选项以关闭 esModule 已解决该错误。

{
  loader: "style-loader",
  options: {
    esModule: false,
  },
},

这会关闭默认值并启用 CommonJS 模块语法，并且似乎可以正确导出值。

【讨论】：