Modular CSS

If you have problems with the name part of the css class replace the config part in webpack.config.js with

.configureCssLoader((config) => {
        if (!Encore.isProduction() && config.modules) {
            config.localIdentName = '[name]_[local]_[hash:base64:5]';
        }
    })

It seems like the setting moved an level higher.

found in https://vue-loader.vuejs.org/guide/css-modules.html#usage
there you can see that modules and localIdentName are on the same level

Not testet in Vue3

EDIT: And don't forget to start yarn watch again ;)

Hello,
I have a problem.
I'm trying to reproduce the work as shown but i'm facing an issue with the use of $style variable.
This is the error i'm having:

<blockquote>[Vue warn]: Property "$style" was accessed during render but is not defined on instance.
at <App>
[Vue warn]: Unhandled error during execution of render function
at <App>
Uncaught TypeError: Cannot read properties of undefined (reading 'sidebar')
</blockquote>

Here is my products.vue complete code

<template>
    <div class="container-fluid">
        <div class="row">
            <aside class="col-xs-12 col-3">
                <div :class="$style.sidebar">
                    <h5 class="text-center">
                        Categories
                    </h5>

                    <ul class="nav flex-column mb4">
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="/"
                            >All Products</a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >Category A</a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >Category B</a>
                        </li>
                    </ul>
                </div>
            </aside>

            <div class="col-xs-12 col-9">
                <div class="row">
                    <div class="col-12">
                        <h1>
                            Products
                        </h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-6 mb-2 pb-2">
                        TODO - load some products!
                    </div>
                </div>

                <div class="row">
                    <legend-component :title="legend" />
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import LegendComponent from '../components/legend';

export default {
    name: 'Products',
    components: {
        LegendComponent,
    },
    data() {
        return {
            legend: 'Shipping takes 10-12 weeks, and products probably won\'t work again',
        };
    },
};
</script>

<style lang="scss" module>
@import '../../scss/components/light-component';
.sidebar {
  @include light-component;
  ul {
    li a:hover {
      background: $blue-component-link-hover;
    }
  }
}
</style>