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

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

这个解决方法对我有用：

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

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

---

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