Import global CSS/SCSS files anywhere in a Vue CLI project

As a project grows, it becomes increasingly annoying to point to a global css/scss files from components at many different directory levels.

In the video, how we can use Webpack's alias feature to solve this problem elegantly.

[VercJames]

Very elegantly solution friend! Just what I was looking for.

[NirajPandey]

Very helpful! With vue-cli 3.x projcts, you should be able to just use @import '~@/scss/colors';

[LumbreraEnMiCamino]

vue cli 3 does not have webconfig? what can i do or where is it?

[ehodges]

Hi Praveen, have you, by chance, figured out how to use multiple scss files in a project that is started with vue cli 3? I'm looking for something similar to what you show here but loading multiple scss files that will all be processed and output as one css file (prefixed) at build time. Or do you have other suggestions for organizing scss files during development?

[thegadgetzone]

Niceee how what if I need to import 5 files? is there a nicer way to do this?

[dominikhosic]

Syntax for Laravel Mix:
mix.webpackConfig({
resolve: {
alias: {
'styles' : path.resolve(__dirname, './resources/scss'),
}
}
});

[dreamzilla]

Great! Would this work with components as well?

[jurgenlandrie]

I tried about everything but there's no way I can get this to work. I'm using postcss instead of sass though.