如何配置 laravel-mix 以便能够将 @material 与 vue.js 一起使用

Question

我需要一些帮助来配置 material-web-components 以使用 vue.js 组件。当我想将一个@material 组件 scss 导入我的 vue 组件时，就会发生错误。

SomeVueComponent.js：

<style lang="scss">
    @import '@material/textfield/mdc-text-field.scss';
</style>

错误是一些@material组件导入其他@material组件scss，但由于includePaths而无法找到，我通过将此代码添加到我的laravel-mix文件中来修复：

webpack.mix.js：

mix.webpackConfig({
   module: {
       rules: [
           {
               test: /\.vue$/,
               loader: 'vue-loader',
               options: {
                   loaders: {
                       scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
                           includePaths: ['node_modules']
                       })
                   }
               }
           }
       ]
   }
});

保存此文件后，一切都正确编译，但现在我在网站上的所有 vue 组件都收到此错误：

[Vue 警告]：挂载组件失败：未定义模板或渲染函数。

经过一整天研究如何解决这个问题，我发现冲突正在产生，因为我使用 webpack 推送 vue-loader 2 次（默认一次 + 我自定义的一次）。

有没有人知道如何做到这一点的解决方法？真的很有帮助。

我正在使用：

• laravel 5.7.8
• laravel-mix 4.0.15
• vue 2.6.10
• vue-loader 15.4.2
• webpack 4.27.1

我已经尝试过 vue-loader v13+ 之后引入 vue 组件的新方式。 （在require之后添加.default）还是一样的vue错误。

Vue.component('some-vue-component', require('./components/SomeVueComponent.vue').default);

Answer 1

SomeVueComponent.js:

<style src="@material/textfield/mdc-text-field.scss" lang="scss"></style>

Answer 2

Laravel 6

webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
    sassOptions: {
        includePaths:  ['./node_modules']
    }
});