Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

VUE component style not effect with wrong class name

See original GitHub issue

Laravel Mix Version: 6.0.13
Node Version :v14.15.4
NPM Version :6.14.10
OS: windows10

Description:

I make a VUE component in Laravel project and edit like this:

<template>
    <div class="table-box-s" id="chart">
        <div class="table-title">title</div>
        <div class="table-sel-box flex">
            <div class="sel-box flex-between">
                <p class="sel-text">name</p>
                <img
                    class="sel-arrow"
                    src="http://daping.test/assets/imgs/screen-icon-arrow.png"
                    alt="select"
                />
            </div>
           <p>other code</p>
        </div>
        <div id="line" class="table-chart"></div>
    </div>
</template>

<script>
  ...
</script>

<style lang="scss" scoped>
.table-box-s {
   // some css
    z-index: 10;
    .table-title {
       // some css
    }
    .table-info-box {
      // some css
        .table-info-item {
           
        }
    }
   // some css
}
</style>

when I run npm run watch and use it in blade. I get this code in browser html head

<style>
._1MK_yfcoY5t_9F79x8VS_ ._2MRNSvxEAzPyahteH9wxak ._2JhTOu_9HO9td3_KWT5WkU[data-v-91b37c4c] {
// css
}
._1MK_yfcoY5t_9F79x8VS_ ._2MRNSvxEAzPyahteH9wxak ._2JhTOu_9HO9td3_KWT5WkU ._32gONQNxzsB53V6EZp4NFM[data-v-91b37c4c] {
// css
}
._1MK_yfcoY5t_9F79x8VS_ ._2MRNSvxEAzPyahteH9wxak ._2JhTOu_9HO9td3_KWT5WkU .XZcjZuLwX7u_iFEWP5dZI[data-v-91b37c4c] {
// css
}
._1MK_yfcoY5t_9F79x8VS_ ._2MRNSvxEAzPyahteH9wxak ._19u80DcXyfFK-LWTms8YQo[data-v-91b37c4c] {
// css
}
.uLQYFZznlB5a-USscx5Ge[data-v-91b37c4c] {
// css
}
._2BfyR80VNlfUh1IEgNq_wk[data-v-91b37c4c] {
// css
}
._2BfyR80VNlfUh1IEgNq_wk[data-v-91b37c4c]::before, ._2BfyR80VNlfUh1IEgNq_wk[data-v-91b37c4c]::after {
// css
}
</style>

but my brwoser html>body>div#app doesn’t have elements with class attribute with _

I don’t how to fix this 😢

Steps To Reproduce:

create a default laravel project
install laravel/ui and run php artisan ui vue
edit resources/js/components/ExampleComponent.vue like my code
run npm install and npm run dev/watch
run php artisan serve and go to localhost:8000

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

1reaction

timmaiercommented, Mar 12, 2021

I am running laravel mix v6.0.13

I commented out line 119 in node_modules/laravel-mix/src/components/CssWebpackConfig.js and replaced with modules: false and the styles apply.

    // modules: useCssModules
    modules: false

So this confirms @thecrypticace suspicion that it’s related to CssModules

0reactions

stale[bot]commented, Jun 3, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.