如何在浏览器审查元素中定位SCSS源文件路径？

该问题由编译阶段未生成*源映射(Source Map)*文件导致，浏览器依赖.map文件才能将编译后的CSS代码反向关联到原始SCSS源文件。

常用编译工具的开启配置 #

1. 官方sass CLI编译 #

执行编译命令时添加--source-map参数：

sass 入口SCSS路径/index.scss 输出CSS路径/MainStyle.css --source-map

生产环境无需source map时替换为--no-source-map参数即可。

2. Webpack打包配置 #

在sass-loader和css-loader配置项中开启sourceMap开关：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { sourceMap: true }
          },
          {
            loader: "sass-loader",
            options: { sourceMap: true }
          }
        ],
      },
    ],
  }
}

3. Gulp编译配置 #

结合gulp-sourcemaps插件实现源映射生成：

const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

gulp.task('compile-sass', () => {
  return gulp.src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./wwwroot/css'));
});

生效验证 #

重新执行编译后，输出目录会生成MainStyle.css.map文件，部署时将该文件和MainStyle.css放在同级目录即可。再次打开浏览器审查元素，样式规则会直接展示对应的SCSS源文件名和行号，资源管理器的原始源文件展示功能也会正常生效。

注意：生产环境可关闭source map避免源文件结构泄露，仅在开发环境开启即可。

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