Vue-cli introduces the problem that the global style method cannot be referenced

requirements: I want to reference a scss or less stylesheet globally. How can I call stylesheet variables and methods in various components? Has a great god ever done it?


this is my understanding of your needs;
1. In the style/scss/main.scss (if this is a global scss stylesheet) file under the project, there is such a variable:

$minWidth:750px;
$color-green: -sharp58D3B4;
$color-white: -sharpfff;
$color-red: -sharpf00;
$color-62: -sharp626262;

2. You need to use a variable such as $color-green in a vue component. You can refer to

in this way.
//login.vue
<template>
    <div class="wrapper">
        <button>Login</button>
    </div>
</template>

<script>
//your code
</script>

<style lang='sass'>
    @import "../xx/style/scss/main";//
    button {
        color: $color-green;
    }
</style>

I don't know if that's what you mean


I don't know if I understand what you mean, you can define a global.less, and then import it in the .less file of each component


sass can use sass-resources-loader , this loader can register the global variable of sass.

https://www.npmjs.com/package.

Menu