vue.js - 如何配置 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 次（默认的 + 我自定义的）。

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

我在用：

• 拉拉维尔 5.7.8
• laravel 混合 4.0.15
• Vue 2.6.10
• Vue 加载器 15.4.2
• 网络包 4.27.1

在 vue-loader v13+ 之后，我已经尝试过导入 vue 组件的新方法。（在require之后添加.default）仍然相同的vue错误。

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

Answer 1

拉拉维尔 6

webpack.mix.js：

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

Answer 2

SomeVueComponent.js:

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