使用Webpack别名时Sass @use规则报错找不到样式文件如何解决

你当前配置不生效的核心有两点：

1. TsconfigPathsPlugin仅作用于JS/TS模块的解析逻辑，Sass的@use/@import由sass编译器独立处理，默认不会读取tsconfig或webpack的JS模块别名配置。
2. 你现有的Components别名映射规则为"Components/*": ["src/components/*/main"]，仅匹配组件的main.tsx入口文件，本身就无法命中同目录下的_style.scss文件。

方案1：webpack别名加~前缀引用 #

1. 在webpack配置的resolve.alias中新增指向组件根目录的别名（避免和现有指向main.tsx的别名冲突）：

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

module.exports = {
  resolve: {
    alias: {
      // 新增样式专用别名，可自定义命名
      '@components': path.resolve(__dirname, 'src/components/')
    },
    plugins: [new TsconfigPathsPlugin()],
  }
}

2. 在scss文件中使用别名时添加~前缀，告诉sass-loader走webpack的模块解析规则：

@use '~@components/UI/Button/style' as button;

方案2：配置sass includePaths（无需加前缀） #

如果不想额外加~前缀，可以直接给sass-loader配置查找根目录：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                // 把src目录加入sass的查找路径列表
                includePaths: [path.resolve(__dirname, 'src')]
              }
            }
          }
        ]
      }
    ]
  }
}

配置完成后可以直接从src目录开始写样式引用路径：

@use 'components/UI/Button/style' as button;

如果你不想维护两套别名，可以调整tsconfig的路径映射规则：将"Components/*": ["src/components/*/main"]改为"Components/*": ["src/components/*"]，后续TS中导入组件时补全main后缀即可（例：import Button from 'Components/UI/Button/main'），这样样式文件也可以直接用~Components/UI/Button/style引用，无需新增额外别名。

内容的提问来源于stack exchange，提问作者Jerome