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

Laravel 6

webpack.mix.js：

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

如何配置laravel-mix以便能够在vue.js中使用@material

2 个答案: