feat(importer): add support for custom file extensions (options.extensions)

[benembery]

We are looking to add custom extensions support. Enabling files to be swapped out at compile time.

The following example allows shows the how the extensions would be configured.

{
  loader: "sass-loader",
    options: {
      sourceMap: true,
      extensions: [`.myext.scss`, ".scss", ".sass", ".css"],
    }
}

In our use case, we supply an arg to webpack-cli that configures the custom extension we wish to build.

Would you be interested in adding this to sass-loader as a feature.

[jsf-clabot]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #583 into master will increase coverage by 0.15%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #583      +/-   ##
==========================================
+ Coverage   97.54%   97.69%   +0.15%     
==========================================
  Files           6        6              
  Lines         122      130       +8     
==========================================
+ Hits          119      127       +8     
  Misses          3        3

Impacted Files	Coverage Δ
lib/webpackImporter.js	100% <100%> (ø)	⬆️
lib/importsToResolve.js	100% <100%> (ø)	⬆️
lib/normalizeOptions.js	96.55% <100%> (+0.12%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d0b35cb...238a1ee. Read the comment docs.

[jhnns]

The change seems ok and I'm kind of surprised that the tests still work, because the resolving logic is very brittle and did break the build several times.

However, I need to think about this change because I want to simplify the resolving behavior. Can you elaborate on your use case a little bit? Why would you want to deviate from Sass' default resolving behavior?

Maybe, this change also needs to be aligned with #573

[benembery]

Hi @jhnns,
Thanks for taking a look at this.

Our use is multi-tenant web applications, where we wish to build from the same source but with specific modifications per tenant.
For example, I would create a master file, colours.scss and have a tenant-specific version named colours.tenant.scss and would like that to be picked up by sass when I am compiling with that tenant.

We are currently doing this for js files with webpack using resolve:extensions in the webpack configuration.

If you need more information than this, let me know.

[codecov]

Codecov Report

Merging #583 into master will increase coverage by 0.15%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #583      +/-   ##
==========================================
+ Coverage   97.54%   97.69%   +0.15%     
==========================================
  Files           6        6              
  Lines         122      130       +8     
==========================================
+ Hits          119      127       +8     
  Misses          3        3

Impacted Files	Coverage Δ
lib/webpackImporter.js	100% <100%> (ø)	⬆️
lib/importsToResolve.js	100% <100%> (ø)	⬆️
lib/normalizeOptions.js	96.55% <100%> (+0.12%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d0b35cb...238a1ee. Read the comment docs.

[alexander-akait]

You can do this using:

{
  test: /\.scss$/,
  loader: "sass-loader",
  resolve: {
    extensions: [ 'my', 'custom', 'extensions', 'scss', 'sass', 'css']
  }
},

[benembery]

I've tried this and it doesn't work as previously outlined in my use case.

[alexander-akait]

@benembery can you create minimum reproducible test repo?

[benembery]

Hi, I'm very sorry for the delay getting you an example.
https://github.com/benembery/multi-tenant-sass-example
If you need anymore information let me know.