SassError: Can't find stylesheet to import when it contains @forward with _index file

[abhiomkar]

• Operating System: Mac OS
• Node Version: v10.16.3
• NPM Version: v6.13.4
• webpack Version: v4.41.5
• sass-loader Version: v8.0.2
• dart-sass version: v1.25.0

Expected Behavior

Expected sass-loader to resolve the module when _index.scss files are used.

Actual Behavior

sass-loader throws following error when @import'ed Sass file contain @forward statement with _index file. (See reproducible steps below).

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

Code

See complete example here:
https://github.com/abhiomkar/sass-module-bug

How Do We Reproduce?

git clone git@github.com:abhiomkar/sass-module-bug.git
cd sass-module-bug
npm i
npx webpack

Notice the error:

[./fixture-import.scss] 434 bytes {main} [built] [failed] [1 error]

ERROR in ./fixture-import.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @forward "@material/base" as mdc-base-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@material/button/_mixins.import.scss 1:1  @import
  /Users/abhiomkar/code/sass-bug-module/fixture-import.scss 1:9 

Changing webpack entry file fixture-import.scss => fixture-use.scss would fix the error.

UPDATE: See this comment for temporary workaround.

[alexander-akait]

@import should support _file.import.extand file.import.ext and prefer using .import files
@use should not

Very strange, when we use @use our importer get those urls:

@material/button/mixins
@material/elevation/mixins
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/variables
@material/animation/variables
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/ripple/mixins
@material/animation/functions
@material/animation/variables
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/theme/functions
@material/theme/variables
@material/animation/variables
@material/theme/variables
@material/rtl/mixins
@material/theme/functions
@material/theme/mixins
@material/touch-target/mixins
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/typography/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/shape/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/rtl/mixins
@material/shape/functions
@material/density/functions
@material/density/variables
@material/theme/variables
@material/elevation/functions

But when we use @import we have:

@material/button/mixins
@material/base <- invalid import

Investigate deeply.

[alexander-akait]

Looks like something broken on dart-sass side when you mixed @import and @use, our importer gets invalid URLs for resolve

[alexander-akait]

Also let's run:

node_modules/.bin/dart-sass --load-path=node_modules fixture-use.scss

All work and fine.

But:

node_modules/.bin/dart-sass --load-path=node_modules fixture-import.scss

No output and no errors

[alexander-akait]

/cc @nex3 Looks something broken on dart-sass side

[alexander-akait]

Example without sass-loader:

const sass = require('sass');

const result = sass.renderSync({
    file: './fixture-use.scss',
    // file: './fixture-import.scss',
    includePaths: ['node_modules'],
    importer: function(url, prev, done) {
        console.log(url);
    }
});

console.log(result.css.toString());

For fixture-use.scss:

@material/button/mixins
@material/elevation/mixins
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/variables
@material/animation/variables
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/ripple/mixins
@material/animation/functions
@material/animation/variables
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/theme/functions
@material/theme/variables
@material/animation/variables
@material/theme/variables
@material/rtl/mixins
@material/theme/functions
@material/theme/mixins
@material/touch-target/mixins
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/typography/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/shape/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/rtl/mixins
@material/shape/functions
@material/density/functions
@material/density/variables
@material/theme/variables
@material/elevation/functions

For fixture-import.scss:

@material/button/mixins
@material/base
@material/feature-targeting
@material/theme
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/animation
@material/elevation
@material/animation/variables
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/theme/variables
@material/elevation
@material/ripple
@material/animation/functions
@material/animation/variables
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/theme/mixins
@material/theme/functions
@material/theme/variables
@material/animation/variables
@material/theme/variables
@material/ripple
@material/rtl
@material/rtl
@material/touch-target
@material/base/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/touch-target
@material/typography
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/typography
@material/shape
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/rtl/mixins
@material/density
@material/density/variables
@material/theme/variables
@material/elevation/mixins
@material/feature-targeting/functions
@material/feature-targeting/mixins
@material/ripple/mixins
@material/rtl/mixins
@material/theme/functions
@material/theme/mixins
@material/touch-target/mixins
@material/typography/mixins
@material/shape/mixins
@material/shape/functions
@material/density/functions
@material/elevation/functions

[abhiomkar]

Thanks for looking into this @evilebottnawi

Though the resolved url points to the base url for some stylesheets, for example @material/base, @material/feature-targeting, etc. The final CSS output generated by renderSync() looks correct.

I've updated my code example.

[nex3]

Also let's run:

node_modules/.bin/dart-sass --load-path=node_modules fixture-use.scss

All work and fine.

But:

node_modules/.bin/dart-sass --load-path=node_modules fixture-import.scss

No output and no errors

Both of these invocations print the same output for me with the latest version of @abhiomkar's repo. I think this is a legit sass-loader bug.

[alexander-akait]

@nex3 No, please run again and look at result, latest dart-sass, please look on my investigation #804 (comment), why URLs is difference for importer? What is wrong?

I wouldn’t like to spend time studying dart and looking for issues, so I ask you to take a little more responsibility, thanks

[nex3]

The URLs are expected to be different between @use and @import, because @import is hitting import-only stylesheets.

[alexander-akait]

@nex3 Where I can found documentation about that? I can't found @material/base in code and where it comes from, providing invalid urls to importer break logic. sass-loader one of their most popular tools to use sass/scss so if we want good support I need information on why this works differently.

[alexander-akait]

And please stop saying that there are bugs everywhere except your code, we are both developers and may make a mistake in our code, so I prefer to investigate firstly and then say where the problem is. Thanks

[nex3]

I'm sorry, I didn't mean to cast blame—I only meant to explain why you were seeing that output. @abhiomkar and I were actually initially investigating Dart Sass for a bug here before we ended up determining it was more likely a sass-loader issue and filing this.

The module system is informally documented on the Sass website. The section on imports and modules is particularly relevant here, since it describes how import-only files work.

For more detailed information, you can check out the Sass specification, particularly the sections on modules and @import.