在 laravel-mix vue 中使用 scss 样式模块编译？

Question

我有一个模块化模板，它使用 Sass-loader 来编译每个组件都有的 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>

这是一个组件，其 style.scss 文件将被编译为模块。 这里的类必须保存到 $style 中。

我在 package.json 中使用这个包：

"sass": "^1.15.2",
"sass-loader": "^7.1.0"

我的 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 中，而且我在编译时没有错误，我做错了什么？

Answer 1

我没有使用样式“模块”，我无法弄清楚，但我设法使用样式“范围”，它很接近它。 为此，我将其添加到我的 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>

和 .css 文件只是正常的。