找到了。实际上您可以在webpack.config.json中配置sass-loader，如下所述：https://github.com/jtangelder/sass-loader
以下是相关部分：

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}

如果您使用Create React App v3（allows absolute imports），则可以使用代字号

@import "~theme/colors";

您可以使用resolve.modules向Webpack模块添加 * 样式表

// webpack.config.js
const path = require('path')

module.exports = {
  // ...
  resolve: {
    modules: [
      'node_modules',
      path.join(__dirname, 'path/to/stylesheets'),
    ],
  },
}

sass-loader允许您从模块导入 _common-btn-styles.scsshttps://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

@import "~_common-btn-styles.scss";

.my-admin-btn {
  // Use the shared mixins
}

在react-scripts最新版本中，您可以在项目根目录下添加一个**.env文件，变量为SASS_PATH=node_modules:src。
要指定更多目录，可以将它们添加到SASS_PATH中，并以:分隔，例如path1:path2:path3**
official doc

网络包5

Webpack 5的配置有所不同，因为includePaths应在选项sassOptions中指定：

// Webpack config
{
  test: /\.scss$/,
  loader: 'sass-loader',
  options: {
    sassOptions: {
      includePaths: [path.resolve(__dirname, '<path to styles>')],
    },
  },
},

网络包4

我不得不做更多的研究，以解决这个问题使用其他答案，所以这里是我的工作解决方案：

// Webpack config
{
  test: /\.scss$/,
  loader: 'sass-loader',
  options: {
    includePaths: [path.resolve(__dirname, '<path to styles>')],
  },
},

然后在scss文件中：

@import 'filename.scss'; // Imported from <path to styles> folder.

.style {
  //...
}

如果将Dart Sass实现与sass-loader一起使用，则选项略有不同。
The options for sassOptions are here

sassOptions: {
...
  loadPaths: [path.resolve(__dirname, '../src/')],
}

如果你使用的是NextJS，这里有一个简单的实现，你可以在这里阅读文档。
在我的例子中，我使用Tailwindcss和SASS，下面是配置文件和sass文件。

// next.config.js

const path = require('path');

/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    appDir: true,
  },
  sassOptions: {
    // define the absolute path...
    includePaths: [path.join(__dirname, 'styles')],
  },
};

// styles/_components.sass

@import 'tailwindcss/components'

@layer components
  .flex-center
    @apply flex items-center justify-center
  .container
    @apply mx-auto px-3 max-w-xl sm:max-w-lg md:px-6 md:max-w-3xl

// styles/global.sass

@import 'tailwindcss/base'
@import 'tailwindcss/utilities'
@import 'components' // absolute import

// app/styles.module.sass

@import 'components' // absolute import

.header
  @apply container flex h-16 items-center justify-between sticky top-0