Simplify importing index.scss in an npm package

[sindresorhus]

Let's say an npm package named foo contains:

.
├── index.scss
├── package.json

Currently, I can use the following to import it:

@import "~foo/index";

But it would be nicer if we could just import it as:

@import "~foo";

Like with JS npm packages.

[alexander-akait]

@sindresorhus thanks for issue, maybe we can use sass field from package.json, maybe we already support this 😄 Can you check this (https://github.com/webpack-contrib/sass-loader/blob/master/lib/loader.js#L40), resolve from webpack api. If it is not support we can fix in webpack

[sindresorhus]

I'm not sure what sass field you're referring to, but that's not really what I'm requesting here. I'm requesting the above to just work without any additional config in either package.json or webpack.

[michael-ciniawsky]

config.resolve.mainFields = [ 'style' ]. e.g normalize.css supports the pkg.style property, which is the most widely used approached I'm aware of atm. style could eventually be supported by webpack as a default mainField, but not sure.... or sass-loader programmatically passes options to the resolver, the question is which...

[alexander-akait]

@michael-ciniawsky need add tests for this 👍

[TheLarkInn]

Only problem is not everyone will expect this behavior no? It would be a webpack/webpack@WebpackOptionsDefaulter change.

[xzyfer]

Note node-sass@5 will automatically support @import "foo"; resolving to @import "foo/index.scss"; if foo is a folder.

[pitpit]

Thanks to mainFields in webpack.config.js, you can resolve file with "sass" or "style" fields from package.json of the npm package.

    module: {
      rules: [
        {
          test: /\.scss|\.css$/,
          use: [
              "style-loader",
              'css-loader',
              "sass-loader"
          ],
          resolve: {
            mainFields: ['sass', 'style']
          }
        }
      ]
    },

Then you can import stylesheet with @import "~foo";

[alexander-akait]

@pitpit Maybe will be good create issue about this in webpack, loader can't register own resolve options, this feature will fix also #556

[pitpit]

@evilebottnawi actually a loader can register its own resolve option. It does work !
(tested with webpack@4.20.0)

[alexander-akait]

@pitpit how? Without hacks?

[pitpit]

no hacks. Look at this repo https://github.com/pitpit/saas-field

[alexander-akait]

@pitpit yep, here issue about what it should be by default for sass-loader to avoid extra configuration

[alexander-akait]

Need support sass field in package.json too