How can I use SCSS/CSS classes globally in Vue.js?

In Vue.js, you can use SCSS (Sass) or CSS classes globally by defining your styles in a global stylesheet and then importing that stylesheet into your Vue components. Here's a step-by-step guide:

1. Create a Global SCSS File: Create a new SCSS file (e.g., styles.scss or global.scss) that contains your global styles. This file might include variable definitions, mixins, or any other styles you want to apply globally.
   // styles.scss
   
   $primary-color: #3498db;
   
   .global-button {
     background-color: $primary-color;
     color: #fff;
     padding: 10px;
     border: none;
     cursor: pointer;
   }

   Import Global SCSS File: Import the global SCSS file in your main JavaScript or Vue file. This is typically done in the entry file of your application (e.g., main.js or main.ts).

   javascript

    // main.js
   
   import Vue from 'vue';
   import App from './App.vue';
   import './styles.scss'; // Import the global styles
   
   new Vue({
     render: h => h(App),
   }).$mount('#app');
   Use Global Classes in Vue Components: Now, you can use the global classes defined in your styles.scss file in any Vue component.
   <!-- YourComponent.vue -->
   
   <template>
     <div>
       <button class="global-button">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'YourComponent',
     // Your component logic here
   };
   </script>
   
   <style scoped>
   /* Component-specific styles go here */
   </style>

2. Note the use of the scoped attribute in the <style> tag. This is important to ensure that your component styles are scoped to the component, preventing them from leaking into other components.

3. By following these steps, you can create and use global SCSS/CSS classes in your Vue.js project. The global styles will be applied throughout your application, and the scoped styles will be specific to each component.