sass-loader: [bug?] Webpack aliases being ignored.

+1 same issue, webpack 2

Guys, have you seen this link? 😃 https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

I think I’ve resolved this for anyone who is still having this issue. I’ll start with my directory/file layout:

node_modules (folder)
	bootstrap (folder)
		scss (folder)
my-app (folder)
	app.scss
	entry.js
webpack.config.js

This is the relevant section of my webpack.config.js:

module.exports = {
	resolve: {
		modules: ['node_modules'],
		alias: {
			'BootstrapScss': path.join(__dirname, 'node_modules/bootstrap/scss/'),
			'BootstrapJs': path.join(__dirname, 'node_modules/bootstrap/js/dist/')
		}
	}
}

The key with the alias path above is that it must be relative to the location of my webpack.config.js file.

In my entry.js, the modules paths “node_modules” will be used to resolve paths to the .js files that live in NPM directory and the “BootstrapJS” alias will resolve to the Bootstrap JS directory:

// NPM JS IMPORTS - uses 'node_modules' to resolve
import 'jquery';
import 'jquery-ui';

// BOOTSTRAP JS IMPORTS - uses 'BootstrapJS' alias to resolve
import 'BootstrapJs/util';
import 'BootstrapJs/alert';
import 'BootstrapJs/button';

When compiled, you should see this message in console:

[0] ./node_modules/jquery/dist/jquery.js 269 kB {0} [built]
[1] ./my-app/entry.js 397 bytes {0} [built]
[2] ./node_modules/jquery-ui/ui/widget.js 19.5 kB {0} [built]
[3] ./node_modules/jquery-ui/ui/version.js 278 bytes {0} [built]
[4] ./node_modules/bootstrap/js/dist/util.js 4.29 kB {0} [built]
[5] ./node_modules/bootstrap/js/dist/alert.js 4.96 kB {0} [built]
[6] ./node_modules/bootstrap/js/dist/button.js 5.24 kB {0} [built]

In my app.scss file, I can import like this:

@import '~BootstrapScss/functions';
@import '~BootstrapScss/mixins';
@import '~BootstrapScss/root';
...

The “~” is required here because it indicates to Webpacks that this is not a relative import. You can find more information here: https://github.com/webpack-contrib/sass-loader#imports

I’m having this issue and it’s January 2018. What a frustrating bug. I’ve tried every single option here and on the web but webpack just keeps complaining about file not found. Added tilde, removed tilde, modified the resolve settings any way possible, used path.resolve, path.join… and nothing worked. Even the error did not change. Any hints?

Any updates on this issue ?

I have the same issue in webpack 2.

PR welcome 👍

I just did something out of fraustration so check this out. So these do not work:

@import '~@vue-mdc-adapter/dist/vue-mdc-adapter.css'
//or
@import '~@vue-mdc-adapter/dist/styles.scss'

This one works:

@import '../../../node_modules/vue-mdc-adapter/dist/vue-mdc-adapter.css'

Unfortunately the .scss package is referencing @material packages, which internally do NOT use tilde and so even directly referencing the .scss file does not work. Here’s my webpack resolve:

  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.vue', '.json', '.scss', '.css'],
    alias: {
      '@src': path.resolve(__dirname, '../src/'),
      '@fonts': path.resolve(__dirname, '../src/assets/fonts/'),
      '@styles': path.resolve(__dirname, '../src/assets/styles/'),
      '@vue-mdc-adapter': path.resolve(__dirname, '../node_modules/vue-mdc-adapter/')
    }
  }

Still interested in using the .scss so I can build themes, so any help is appreciated.

@williamboman

So even if I use @import inline like this:

@import '~webfonts-loader!../js/alfa.font.js';

Or

@import 'webfonts-loader!../js/alfa.font.js';

I get File to import not found or unreadable. If instead of using inline loaders you specify it in the Webpack config then just import the file, I can see from the resulting error that it attempted to load the file directly instead of the result of passing the file through the loader I specified.

I feel this could be related to this issue as it seems somewhere along the line the @imported file skips part of the webpack algorithm.

To be honest, I’m not sure if aliases are supported. It should be supported afaik, but we have no test case for that.

Thx for reporting this. I will take a look.

Suppose your alias is ‘$scss’, then you have to use @import ‘~$scss/app.scss’

@SteveOps Intellij does not recognize the imports, but it works with webpack. It’s a bug in IntelliJ already fixed into phpStorm.

Cordialement, Nicolas Trichet

2017-11-11 23:51 GMT+01:00 Steve Ops notifications@github.com:

@vaughn-taylor https://github.com/vaughn-taylor Not working for me. Webpack 3.6.0 and sass-loader 6.0.6. Was working yesterday then I accidentally deleted node_modules, now am getting that error with sass @imports https://github.com/imports and I dont know why.

This is part of my webpack config, located one level into the project root. [image: screen shot 2017-11-12 at 01 44 11] https://user-images.githubusercontent.com/12711215/32694196-20768d4e-c74b-11e7-95da-33f0a5ba51b4.png

And these are the failing imports File to import not found or unreadable: ~bootstrap/scss/functions

[image: screen shot 2017-11-12 at 01 44 38] https://user-images.githubusercontent.com/12711215/32694200-4362b512-c74b-11e7-9553-e5448a5e3b39.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/webpack-contrib/sass-loader/issues/410#issuecomment-343699731, or mute the thread https://github.com/notifications/unsubscribe-auth/ADqd1sCb5vRa_RdqN1W9VhR0Dm-J_ppvks5s1iTZgaJpZM4MgBoC .