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文件，这很正常。

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

1 个答案: