Deep import from scoped npm package breaks webpack resolve.aliases

[gizm0bill]

➡ find . -type d \( -path ./build -o -path ./node_modules \) -prune -o -print
.
./package.json
./src
./src/app
./src/app/app.scss
./src/app/index.js
./src/styles
./src/styles/main.scss
./webpack.config.js

// webpack.config.js

var path = require('path');
module.exports =
{
  entry: path.resolve('src', 'app', 'index.js'),
  output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' },
  module:
  {
    rules: [{ test: /\.scss$/, use: ['css-loader', 'sass-loader'] }]
  },
  resolve: 
  {
    // notice the "@"
    alias: { '@styles': path.resolve(__dirname, 'src', 'styles') }
  }
}

// src/app/index.js

require( './app.scss' );

// src/app/app.scss

@import '~@styles/main';

// src/styles/main.scss

$some-var: #fff;
body { background-color: $some-var; }

➡ webpack --config webpack.config.js
...
ERROR in ./src/app/app.scss
Module build failed:
@import '~@styles/main';
^
      File to import not found or unreadable: ~@styles/main.
Parent style sheet: stdin
      in /some/path/src/app/app.scss (line 1, column 1)
 @ ./src/app/index.js 1:0-23

[alexander-akait]

@gizm0bill thanks in near future i investigate this

[alexander-akait]

@gizm0bill using @import '~@styles/main'; mean what sass-loader try to search file by node_modules/@style/main path. Alias should be working only if your use @import '~@styles'.

@import '~@styles/main'; - importing file from package.
@import '~@styles'; - importing module (respect browser field in package.json and etc).

[gizm0bill]

@evilebottnawi aliases in webpack can be setup in various ways, and should resolve deep from the aliased path: https://webpack.github.io/docs/configuration.html#resolve-alias
Now the browser field from package.json is not part of the official docs and specs, I only found this link: https://github.com/defunctzombie/package-browser-field-spec about it... is this what are you talking about?

[alexander-akait]

@gizm0bill seems alias don't work now for all packages #410, it is related to this problem, right?

[gizm0bill]

Might be, need to check..

[solidevolution]

We got this problem with a vue / postcss stack.
We wanted to define global custom properties and use them via the webpack alias in our vue components.

@import "css/vars.css" (css alias) doesnt work
@import "realpath../../src/assets/css/vars.css" works

[alexander-akait]

@solidevolution aliases works only with modules: @import "~something", if your want own logic for loading please use custom importer (https://github.com/sass/node-sass#importer--v200---experimental), thanks!

[solidevolution]

@evilebottnawi we don't use sass/scss and experimental versions ;)
Do you have an import solution for postcss?

[alexander-akait]

@solidevolution sass-loader build on importer function, without importer sass-loader doesn't works, so it does not make sense not to support experimental importer function(s). No i don't have postcss solution, thanks!

[luckylooke]

You can try this fix. It makes my aliases work again. Maybe it will help to you too.

Hi,

I think I have the same issue. I'm trying to @import files from a subdirectory. Importing files from the same directory works like a charm, but from a subdirectory I get the same error as the initial post.

My folder structure

webpack.config.js
./src
./src/_scss
./src/_scss/main.scss
./src/_scss/subfolder
./src/_scss/subfolder/subfile.scss
./src/index.html

in main.scss
@import 'subfolder/subfile'

in webpack.config.js

module: {
    rules: removeEmpty([
      {
        test: /\.scss$/,
        loader: extractCSS.extract([
          {
            loader: `style-loader`,
          },
          {
            loader: `css-loader`,
          },
          {
            loader: `postcss-loader`,
          },
          {
            loader: `sass-loader`,
          },
        ]),
      },
  ])
}