Skip to content

[Bug] webpackImporter:true (default) loses path context on Windows when resolving SCSS imports inside node_modules #1308

@anarefolio

Description

@anarefolio

Bug description

On Windows (native, no WSL), when webpackImporter is true (the default),
sass-loader fails to resolve relative SCSS imports inside node_modules packages.

The same code works perfectly on Linux/macOS.

To Reproduce

  1. Windows 10/11, Node.js 24, native (no WSL)
  2. Have a SCSS file that imports from a package which has internal relative imports:
// your file
@import '@primer/css/color-modes/index.scss';

// inside node_modules/@primer/css/color-modes/index.scss
@import './themes/light.scss'; // FAILS on Windows

Error

Error: Can't find stylesheet to import.
@import './themes/light.scss'
node_modules@primer\css\color-modes\index.scss

Root cause

With webpackImporter: true, webpack's resolver handles all imports. On Windows,
webpack's resolver loses the working directory context when processing relative
imports inside node_modules packages, causing them to fail.

Fix

Setting webpackImporter: false and using modern-compiler API with loadPaths: ['node_modules'] resolves the issue — sass uses its own native resolver which handles Windows paths correctly.

This was confirmed and documented in:

Suggested fix

Consider defaulting to modern-compiler API when dart-sass is detected,
or documenting that Windows users need webpackImporter: false.

Environment

  • OS: Windows 11, x64
  • Node: 24.15.0
  • sass-loader: (bundled in next@16.2.3)
  • sass: 1.97.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions