Laravel Mix 4.0无法将全局混合CSS与本地文件CSS结合在一起

Question

使用Laravel Vue时遇到问题。我放置了app.scss文件，然后使用Laravel Mix 4.0将其编译到公用文件夹中。我不知道是什么使它出错，但对我来说看起来很奇怪。这是我的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
})

编译app.scss文件时没有任何问题，但是当我添加@import将另一个scss文件导入到我的.vue文件中时

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

然后npm run dev在运行程序时出现这样的错误。

但是，如果我删除其中之一，例如删除@import或.sass('resources/sass/app.scss', 'public/css', { implementation: require('node-sass') })，则再次npm run dev并运行程序。它运作良好。有没有人遇到过这样的问题？我已经尝试过多次更改Webpack，但是我不确定问题是否出在Webpack上。

主要要点是我不想将我的scss文件导入到main.js文件中，因为它将替换我的app.scss样式。我想区分管理页面和用户页面之间的样式

Answer 1

  

它不起作用，因为使用异步导入时未创建包含样式加载器和css-loader的供应商文件。

此解决方法对我有用：

在最顶部的app.js中创建一个空的init.scss文件和require('../../sass/init.scss');似乎可以解决问题。

  

此解决方法建议将空白的scss文件导入到我的app.js中，以强制将样式加载器和css加载器包含在捆绑软件中。

---

当我之前遇到相同的问题时，我在laravel-mix github issue中发现了这个问题。