webpack alias with tilde not working for imports

[philippkuehn]

With sass-loader < 7.0.0 this worked fine

// webpack config
resolve: {
	alias: {
		fonts: path.resolve(__dirname, '../src/assets/fonts'),
		settings: path.resolve(__dirname, '../src/assets/sass/settings.scss'),
	},
},

// works
@import '~settings';

// works
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('~fonts/rubik-v7-latin-300.woff2') format('woff2'),
       url('~fonts/rubik-v7-latin-300.woff') format('woff');
}

With sass-loader >= 7.0.0

// error: can't resolve '~settings'
@import '~settings';

// works
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('~fonts/rubik-v7-latin-300.woff2') format('woff2'),
       url('~fonts/rubik-v7-latin-300.woff') format('woff');
}

Is this an expected behavior or an bug?

[alexander-akait]

@philippkuehn please create minimum reproducible test repo

[philippkuehn]

Link to Repo: https://github.com/philippkuehn/sass-loader-alias-bug

After some testing I found out that this error only occurs in combination with Vue.
I'm not sure if this error is related to sass-loader or vue-loader but everything worked fine with sass-loader v6.

[jsg2021]

I'm seeing ~ imports fail with 7.x too. 6.x works fine.

[jsg2021]

I'm not using Vue either.

[alexander-akait]

Try:

resolve: {
    alias: {},
    extensions: [
      ".sass",
      ".scss",
      ".css",
      ".wasm",
      ".web.js",
      ".mjs",
      ".js",
      ".json",
      ".web.jsx",
      ".jsx"
    ],

in webpack config

[jsg2021]

I think I'm seeing #556

[jsg2021]

which, I think this issue and #567 are all related.

[jsg2021]

@evilebottnawi thanks for the suggestion. I tried that, but no success. I've rolled back to 6.x for now.

[alexander-akait]

@jsg2021 in theory solution should be solve your problem, can you create minimum reproducible test repo?

[jsg2021]

@evilebottnawi Here you go: https://github.com/jsg2021/style-loader-scoped-import-failure

you will probably need to git reset --hard after npm install... I had to commit a gutted version of my internal library, and npm blows it away on install.

normalize.css imports fine, but the scoped import fails.

[yiqianglin]

same problem, is there a solution？