如何在webpack、sass-loader和dart sass环境下支持~前缀导入sass文件

问题根因与解决方案 #

你现有配置首先存在基础错误，其次没有命中sass-loader对~前缀的解析规则，按以下步骤调整即可：

注意：webpack4最高兼容sass-loader v10版本，如果你当前使用的sass-loader版本高于v10，请先降级到10.x版本避免兼容性问题。

1. 先修正现有配置错误

你当前配置中重复定义了两次sassOptions字段，后者的函数式写法会直接覆盖前者的静态配置，这就是你写的打印逻辑没有输出、fiber配置也没有生效的核心原因。另外includePaths: ["~"]配置无效，includePaths是sass原生的路径查找规则，无法识别webpack专属的~前缀标识符。

2. 新增webpack别名配置（优先级最高，兼容所有场景）

在webpack配置顶层的resolve字段中添加别名规则，直接把~映射到你需要的项目根目录：

const path = require('path')

module.exports = {
  // 其他webpack配置项
  resolve: {
    alias: {
      // 按你的需求，~指代项目根目录，后续导入~node_modules/xxx会自动指向根目录下的对应文件
      '~': path.resolve(__dirname)
    },
    extensions: ['.js', '.scss', '.sass']
  }
}

3. 修正后的sass-loader配置

{
  loader: 'sass-loader',
  options: {
    sourceMap: isDevelopment,
    implementation: sass,
    sassOptions: {
      fiber: false
    },
    // 必须开启webpackImporter，才会走webpack的别名解析逻辑识别~前缀
    webpackImporter: true
  }
}

配置完成后重启webpack即可，原有所有带~前缀的导入语句无需修改即可正常解析。

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