如何在React+Webpack+TypeScript项目中使用SCSS绝对导入路径？

你之前尝试的webpack配置（sass-loader includePaths、resolve搜索目录、alias）对Live Sass Compiler无效——因为这个VS Code扩展是独立于webpack的工具，有自己的配置体系，不会读取webpack的配置文件。

以下是针对Live Sass Compiler的可行方案：

• 打开VS Code设置（快捷键Ctrl+, / Cmd+,），搜索「Live Sass Compiler」找到Include Paths配置项；或者直接通过Ctrl+Shift+P / Cmd+Shift+P打开命令面板，输入「Open Settings (JSON)」编辑配置文件。
• 在settings.json中添加如下配置，将src目录设为SCSS导入的根搜索路径：

"liveSassCompile.settings.includePaths": [
    "./src"
]

• 在Layout.module.scss中，直接使用相对src的绝对路径导入文件：

@import 'assets/styles/variables';

• 重启Live Sass Compiler：点击VS Code状态栏的「Watch Sass」按钮停止监听，再重新点击启动，确保新配置生效。

补充：如果你的项目同时需要用webpack构建，之前的webpack配置是针对生产/开发构建流程的，和Live Sass Compiler的实时编译无关，两者需要分别配置。

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