sass-loader: webpack alias with tilde not working for imports

I still have problems with ~ syntax.

I have Static alias in webpack and scss file with content below.

.game-background {
  width: 100%;
  height: 100%;
  background: url('~Static/texture/space_bg.jpg') no-repeat center;
}

Chrome console

game_page.jsx:186 GET http://localhost:9091/~Static/texture/space_bg.jpg 404 (Not Found)

Webpack config style rules:

rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
              modules: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]

I tried sass-loader@6 and sass_loader@7.0.3.

Any suggestions? Maybe I did something wrong?

Hi was this resolved? I am having the same problem using the tilde. eg. @import ‘~SharedStyles/card’;

However, my configuration currently works for aliases with .jsx and .js

module: {
    loaders: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules|bower_components|run\/tasks\/test\/wrapper\.js)/,
          loader: 'babel',
        },
        {
            loader: 'sass-loader',
            test: /\.scss$/,
        },
    ],
},
plugins: [
    ],
resolve: {
    extensions: ['', '.js', '.jsx', '.scss'],
    alias: {
        SharedStyles: path.resolve(__dirname, '../../Another.Project/Styles/components'),
        SharedComponents: path.resolve(__dirname, '../../Another.Project/Scripts/components'),
    },
},

On sass-loader version < 7 you need to explicitely set the webpackImporter option to true:

 {
  loader: 'sass-loader',
  options: {
    webpackImporter: true
  }
 }

Hi, 😃 looks like it also not work when resolve.alias property starts with tilde character. e.g

// part of webpack.config.js

alias: {
  ~foo: '/path/to/foo'
}


// usage

@import '~~foo/bar.css'

would the alias start with ~ is not allow ?

Found problem, https://github.com/webpack-contrib/sass-loader/blob/master/lib/importsToResolve.js#L6 use g what change lastIndex after each search.

Try:

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

in webpack config

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.

I will try, but not these days. Too busy 😕

Write tests is hard, a spend 1 hours on issue and spend 4 hours on tests, but did not make it