reactjs - React & SASS 项目如何移除循环引用 (@use)

Question

大家好，我的 sass 资源中的循环引用有问题。我想在我的整个项目中使用 (@use "~resources" as *;)。

这是错误：

UnhandledPromiseRejectionWarning: DataCloneError: function destructLexErrorInfo() { // 删除添加到错误信息的循环引用： // info....... } 无法克隆。

这是我的 webpack 文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TypeScriptCheckerPlugin = require("fork-ts-checker-webpack-plugin");
const ExtractTextPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const resourcesFile = path.join(
  path.resolve("./src"),
  "styles/index.scss"
);

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);

  const styleName = "styles/[name].css";

  return {
    entry: path.join(__dirname, "src", "index.tsx"),
    output: {
      path: path.join(__dirname, "build"),
      filename: "index.bundle.js",
    },
    mode: process.env.NODE_ENV || "development",
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
      extensions: ["*", ".ts", ".tsx", ".js", ".jsx"],
      alias: { resources: resourcesFile },
    },
    devtool: "inline-source-map",
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          loader: "ts-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ["babel-loader"],
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            ExtractTextPlugin.loader,
            {
              loader: "css-loader",
              options: {
                modules: {
                  auto: /\.module\.\w+$/i,
                  mode: "local",
                  exportGlobals: true,
                  localIdentName: "[local]",
                  namedExport: true,
                  exportLocalsConvention: "camelCaseOnly",
                  exportOnlyLocals: false,
                },
              },
            },
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: ["postcss-preset-env", "autoprefixer"],
                },
              },
            },
            "sass-loader"
          ],
        },
        {
          test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
          use: ["file-loader"],
        },
      ],
    },
    optimization: {
      minimizer: [new CssMinimizerPlugin()],
      minimize: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "build", "index.html"),
      }),
      new ExtractTextPlugin({
        filename: "[name].css",
        chunkFilename: styleName,
      }),
    ].concat(
      isDevBuild
        ? []
        : [
          new TypeScriptCheckerPlugin({
            eslint: {
              enabled: true,
              files: [`${__dirname}/**/*.{ts,tsx}`],
            },
          }),
          new CleanWebpackPlugin(),
        ]
    ),
    devServer: {
      contentBase: "./build",
    },
  };
};`

这是我的 sass 全局文件

那就是我想在我的所有项目中使用我的资源

此解决方案仅适用于一个文件。

标签： reactjswebpacksass