Vue.js 在laravel mix vue中使用scss风格的模块编译？

我有一个模块化的模板，它使用Sass加载器编译每个组件都有的scss文件，但是在laravel中使用它和laravel mix将不起作用，这没有任何作用

我使用的是带有php7和Vue JS的最新版本的laravel（5.8）

组件的示例：

    <template>
       <div :class="$style.logo">
          <div :class="$style.logoContainer">
            <img
              v-if="!settings.isMenuCollapsed || withDrawer"
              src="resources/images/logo-inverse.png"
              alt
            >
            <img
              v-if="settings.isMenuCollapsed && !withDrawer"
              src="resources/images/logo-inverse-mobile.png"
              alt
            >
          </div>
        </div>
    </template>

    <style lang="scss" module>
    @import "./style.module.scss";
    </style>

My babel.config.js：

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
}

最后是我的webpack.mix.js文件：

const mix = require('laravel-mix');
require('laravel-mix-alias');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
});

mix.alias({
    '@': '/resources/js'
})

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

问题是，组件的scss文件中的类没有被编译，正因为如此，编译后的html标记没有样式，失去了模板的所有结构

这必须是已编译文件组件：

<div class="index_logo_hObJ1">
    <div class="index_logoContainer_1zCMH">
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

这就是我得到的：

<div>
    <div>
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

正如您所看到的，没有向div中注入任何类，而且我在编译时没有遇到任何错误，我做错了什么？

我没有使用样式“module”，我无法理解这一点，但我成功地使用了样式“scoped”，很接近。为此，我将以下内容添加到我的webpack.mix.js文件中：

let mix = require('laravel-mix');
require('laravel-mix-alias');

mix.alias({
    '@': '/resources/js'
})

mix
    .setPublicPath('./default/public')
    .js('resources/js/app.js', 'default/public/javascript/')
    .sass('resources/sass/app.scss', 'default/public/css/')    
    .sourceMaps()
    .version();
;

mix.options({
    extractVueStyles: true,
    processCssUrls: false
});

然后，您可以在.vue组件上使用它：

<style lang="scss">
    @import "./style.module.scss";
</style>

@导入“/style.module.scss”；

---

还有.css文件，这很正常

你找到解决方法了吗？我不能用“模块”的样式，我只使用“范围”的样式，这很好用。朋友，我有同样的问题，完全是用同一个模板，我不能像你说的那样编译我组件中的类，所以它们是带有模块的样式，你能给我一个你如何解决这个问题的例子吗？我会非常感激的！你好，fernando，我没有使用样式“module”，我无法理解，但我设法使用样式“scoped”，它很接近。为此，我将其添加到我的webpack.mix.js文件中：[code]let mix=require（'laravel-mix'）；要求（“laravel-mix-alias”）；mix.alias（{'@'：'/resources/js'}）mix.setPublicPath（'./default/public'）.js（'resources/js/app.js'，'default/public/javascript/'））.sass（'resources/sass/app.scss'，'default/public/css/'）.sourceMaps（）.version（）；选项（{extractVueStyles:true，processCssUrls:false}）；如果您可以使用

laravel mix vue css模块

感谢您的响应，那么您刚刚在

webpack.mix.js

中更改了配置？组件中的html元素是否按原样？例如，

中的

$style

我的意思是如果html元素没有变化？

<style lang="scss">
    @import "./style.module.scss";
</style>