fdusautoir's avatar

Alias render empty css

Hi there,

I just installed Initia JS and add an alias with the webpackConfig function on mix. All is green but CSS files are empty. If I comment the @ line, CSS files are ok (JS not).

mix.webpackConfig({
	output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
	resolve: {
	  alias: {
	    vue$: 'vue/dist/vue.runtime.esm.js',
	    '@': path.resolve('resources/js'),
	  },
	}
})
.sass('resources/assets/sass/theme.scss', 'public/css')
.sass('resources/assets/sass/board.scss', 'public/css')
.js('resources/assets/js/setup.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.version()
.sourceMaps();

How to solve it ?

I tried a lot of things : laravel-alias-mix package, add a @sass alias, but nothing works.

Thanks for your help

0 likes
3 replies
rodrigo.pedra's avatar

Do you use any relative paths inside your CSS/Sass files? Something like: @import '@/otherfile.css'

I have this config in my webpack.mix.js file:

resolve: {
    alias: {
        '@': path.resolve('resources/assets'),
        vue$: 'vue/dist/vue.runtime.esm.js',
    },
},

And keep the ./js and ./sass directories inside ./resources/assets like the old days.

The downside is always having to add /js/ on my JavaScript imports, for example:

import SelectInput from '@/js/components/forms/inputs/SelectInput';
import FormField from '@/js/components/forms/FormField';

But this setup works for me.

Also when importing a CSS file inside a Vue SFC (Single-File Component) I have to prepend a ~ to the path (don't know why), as such:

<style lang="scss" scoped>
@import "~@/sass/_app-root.scss";
// ...

Here _app-root.scss is just a Sass partial with minimal stuff to be used inside Vue SFC.

Hope something here helps you.

1 like
fdusautoir's avatar

Thanks for you feeback @rodrigo.pedra. I noticed that the issue was related to the resources/js and resources/assets/sass. The solution was to move the sass directory at the same root as js : resources/sass

1 like

Please or to participate in this conversation.