CODEWITHSUNDEEP
laravelvue.jswebpacksasslaravel-mix
Jems
Jems

Reputation: 1706

Laravel Mix 4.0 can't combine global mix css with local file css

I am facing problem when using Laravel Vue. I put my app.scss file and then compile it to public folder using Laravel Mix 4.0. I didn't know what makes it error, but it looks so weird to me. This is my webpack.mix.js

mix.webpackConfig({
  output: {
    filename: '[name].js',
    chunkFilename:'js/[id].[chunkhash].js',
    publicPath: '/',
 },
 resolve: {
    extensions: ['.js', '.vue'],
    alias: {
        '@': __dirname + "/resources"
    }
 }
});

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
    processCssUrls: false
})

I don't have any problem when compile app.scss file, but when I add @import to import another scss file into my .vue file

<style lang="sass">
    @import '@/sass/public.scss'
</style>

then npm run dev I got error like this when running the program.

error

But if I remove one of the them like remove the @import or .sass('resources/sass/app.scss', 'public/css', { implementation: require('node-sass') }) then npm run dev again and run the program. It works well. Have anyone ever got the problem like this? I have tried to change the webpack so many times, but I'm not sure that the problem is on the webpack.

The main point is I don't want to import my scss file into main.js file because it will replace my app.scss style. I want to distinguish the style between admin and user page

Upvotes: 0

Views: 756

Answers (1)

senty
senty

Reputation: 12847

it doesn't work because a vendors file containing style-loader and css-loader was not being created when using async imports.

This workaround worked for me:

Creating an empty init.scss file and require('../../sass/init.scss'); in your app.js at the very top seems to solve the problem.

This workaround suggests to import a blank scss file into my app.js to force style-loader and css loader to be included in the bundle.

I found about that in laravel-mix github issue when I had the same problem before.

Upvotes: 1

Related Questions