#tools.sass

• Type: Object | Function
• Default:

const defaultOptions = {
  sassLoaderOptions: {
    // CSS Source Map enabled by default in development environment
    sourceMap: isDev,
  },
};

tools.sass modifies the options of @rsbuild/plugin-sass. It accepts the full plugin options:

#Modifying sass-loader options

When sassLoaderOptions is an Object, it is merged with the default config through Object.assign in a shallow way. It should be noted that sassOptions is merged through deepMerge in a deep way. For example:

export default {
  tools: {
    sass: {
      sassLoaderOptions: {
        sourceMap: true,
      },
    },
  },
};

When sassLoaderOptions is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:

export default {
  tools: {
    sass: {
      sassLoaderOptions(config) {
        // Modify the additionalData config
        config.additionalData = async (content, loaderContext) => {
          // ...
        };
      },
    },
  },
};

#Disabling URL rewriting

By default, relative URLs in Sass files are rewritten by resolve-url-loader so that they resolve relative to the source file. If your project does not rely on this, turn it off to drop one loader from the chain:

export default {
  tools: {
    sass: {
      rewriteUrls: false,
    },
  },
};

#Modifying Sass Version

In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Modern.js, you can install the desired Sass version in your project and set it up using the implementation option of the sass-loader.

export default {
  tools: {
    sass: {
      sassLoaderOptions: {
        implementation: require('sass'),
      },
    },
  },
};

#Util Function

#addExcludes

• Type: (excludes: RegExp | RegExp[]) => void

Used to specify which files sass-loader does not compile, You can pass in one or more regular expressions to match the path of sass files, for example:

export default {
  tools: {
    sass: {
      sassLoaderOptions(config, { addExcludes }) {
        addExcludes(/node_modules/);
      },
    },
  },
};

The plugin's exclude option is the recommended equivalent:

export default {
  tools: {
    sass: {
      exclude: /node_modules/,
    },
  },
};

#Legacy form

In earlier versions, tools.sass took the sass-loader options directly, e.g. tools.sass: { sassOptions: {} } or tools.sass(config, { addExcludes }) {}. This form still works: Modern.js wraps it into sassLoaderOptions and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.

// legacy
export default {
  tools: {
    sass: {
      sourceMap: true,
    },
  },
};

// current
export default {
  tools: {
    sass: {
      sassLoaderOptions: {
        sourceMap: true,
      },
    },
  },
};