Webpack与Gatsby问题：SCSS SourceMaps无法启用

数据老陈

2026-5-22

解决Gatsby v1中SCSS SourceMaps不生效的问题

首先得给你提个醒：Gatsby v1里配置SCSS相关功能，核心配置是在gatsby-config.js里，不是你提到的gatsby-node.js——这大概率是你一开始找错地方的原因！

接下来一步步帮你排查和解决：

1. 先确认依赖是否安装完整

Gatsby v1的SCSS插件需要依赖node-sass，先确保这两个包都装好了：

npm install gatsby-plugin-sass node-sass --save
# 用yarn的话可以替换成
yarn add gatsby-plugin-sass node-sass

2. 在gatsby-config.js里开启SourceMaps

打开项目根目录的gatsby-config.js，找到plugins数组，添加插件配置并明确开启sourceMap：

module.exports = {
  // 其他项目配置...
  plugins: [
    // 其他已配置插件...
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        // 关键配置：启用SourceMap
        sourceMap: true,
        // 如果需要调整Sass编译精度等其他参数，也可以在这里补充
        // precision: 8,
      },
    },
  ],
}

3. 清除缓存并重启开发服务

Gatsby会缓存编译结果，旧缓存可能导致新配置不生效，先清缓存再重启服务：

gatsby clean
gatsby develop

4. 备选方案：手动修改Webpack配置（仅当以上步骤无效时）

如果上面的操作都没效果，可能需要直接调整Webpack的loader配置——这时候才需要用到gatsby-node.js。在文件中添加以下代码，手动给sass-loader开启sourceMap：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
  })
}