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？

[alexander-akait]

Very interesting without import App from './app.vue' works, without import './style.scss' works, together not 😕 investigate

[alexander-akait]

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

[alexander-akait]

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

[jhnns]

A fix shipped with 7.0.3 🚀

[nrei0]

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?

[HairyRabbit]

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 ?

[alexpearce92]

still have problems with this in 7.1.0.
webpack.config

const postcssPlugins = () => [
    require('postcss-flexbugs-fixes'),
    autoprefixer({ flexbox: 'no-2009' }),
    postCSSCustomProperties({ warnings: true })
];

module.exports = {
output: {
	path: path.resolve(__dirname, 'dist'),
	publicPath: '/cwp/static/'
},
alias: {
	assets: path.resolve("assets")
}
module: {
        rules: {
		test: /\.scss$/,
		use: [
			'raw-loader',
			{
				loader: 'postcss-loader',
				options: {
					plugins: postcssPlugins
				}
			},
			'sass-loader'
		]
	},
...

styles.scss

@font-face {
    src: url('~assets/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2') format('woff2')
}

In browser:

http://localhost:4200/cwp/static/~assets/fonts/source-sans-pro/sourcesanspro-light-webfont.woff net::ERR_ABORTED 404 (Not Found)

[roro1000]

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'),
    },
},

[sarcadass]

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

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

[dmitryvmin]

Bump

[rintisch]

For me it is not working with a full path to the CSS file like @import '~baguettebox.js/dist/baguetteBox.css'; but it works with @import '~baguettebox.js';.

This feature is at least used by Webpack Encore, described in https://symfonycasts.com/screencast/webpack-encore/css, start at 2:50min...

Might help someone?

[alexander-akait]

@import '~baguettebox.js/dist/baguetteBox.css'; means @import 'node_modules/baguettebox.js/dist/baguetteBox.css';, does baguettebox.js package contain this file?

[rintisch]

Yes baguettebox.js contains this file:

As I said I'am only working with Webpack Encore which is a wrapper for webpack.

It works here this way because Webpack Encore watches for the path in the package.json of the npm package. There it looks for the key style. In baguettebox.js it looks like the following:

{ 
...
"style": "dist/baguetteBox.min.css",
...
}

[alexander-akait]

Don't forget sass keeps @import with .css extension as is

For me it is not working with a full path to the CSS file like @import '~baguettebox.js/dist/baguetteBox.css';

What is the error?

[rintisch]

Error: Failed to find '~baguettebox.js/dist/baguetteBox.css'

[alexander-akait]

@rintisch Can you create simple reproducible test repo? I will look

[rintisch]

I will try, but not these days. Too busy :-/

[alexandis]

Don't forget sass keeps @import with .css extension as is

So how to resolve this then?

@import "~mapbox-gl/dist/mapbox-gl.css";

It's a reference in my Angular module. And there it points to the correct direction. But when I publish it and install to the target app, it points to "https://localhost:4200/~mapbox-gl/dist/mapbox-gl.css", not to "node_modules/mapbox-gl/dist/mapbox-gl.css".

[alexander-akait]

@alexandis When you write @import "~mapbox-gl/dist/mapbox-gl.css";, sass-loader doesn't resolve your @import, why? Because sass iteself keep all @imports with .css extension as is in your code, you should handle css using css-loader + style-loader/mini-css-extract-plugin, without configuration hard to say why it was not handled

[alexandis]

@alexandis When you write @import "~mapbox-gl/dist/mapbox-gl.css";, sass-loader doesn't resolve your @import, why? Because sass iteself keep all @imports with .css extension as is in your code, you should handle css using css-loader + style-loader/mini-css-extract-plugin, without configuration hard to say why it was not handled

Hmm... Is there a simpler way to reference 3rd party css in my Angular library without need to directly reference them in the app I install my library into and / or without need to use another bunch of plugins like style-loader, etc.? I've tried to use different configuration settings to point my app where to look for css (e.g. "styleIncludePaths": ["../../../node_modules"] in ng-package.json), but all in vain. I can't believe that can be so complicated!

[alexander-akait]

@alexandis Sorry, I don't know angular CLI, I think better to ask them (angular-cli team), I think it should be simple