vue中配置scss全局变量的步骤

Sure! Here is a step-by-step guide on how to configure global SCSS variables in Vue:

1. Install the required dependencies:
2. Open your terminal and navigate to your Vue project directory.

3. Run the following command to install sass-loader and node-sass:
   npm install sass-loader node-sass --save-dev

4. Create a new SCSS file:

5. In your project's source directory, create a new file named variables.scss (or any other name you prefer).

6. Open the variables.scss file and define your global variables. For example:
   scss
$primary-color: #ff0000;
$secondary-color: #00ff00;

7. Import the SCSS file in your Vue project:

8. Open the main.js file in your project's source directory.

9. Add the following line at the top to import the SCSS file:
   javascript
import './variables.scss';

10. Configure the SCSS loader in your Vue project:

11. Open the vue.config.js file in your project's root directory. If the file doesn't exist, create it.

12. Add the following code to configure the SCSS loader:
    javascript
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import \"@/variables.scss\";`
}
}
}
};

13. Restart your Vue development server:

14. If your development server is running, stop it by pressing Ctrl + C in the terminal.
15. Start the development server again by running the command:
    npm run serve

Now you can use the global SCSS variables in your Vue components. Here are two examples:

Example 1: Using global SCSS variables in a component's style section:

<template>
  <div class=\"example-component\">
    <h1 :style=\"{ color: $primary-color }\">Hello, Vue!</h1>
    <p :style=\"{ color: $secondary-color }\">This is an example component.</p>
  </div>
</template>

<style lang=\"scss\">
.example-component {
  h1 {
    font-size: 24px;
  }
  p {
    font-size: 16px;
  }
}
</style>

Example 2: Using global SCSS variables in a component's computed property:

<template>
  <div>
    <p>{{ computedColor }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    computedColor() {
      return this.$store.state.themeColor; // Assuming you have a Vuex store with a theme color state
    }
  }
};
</script>

<style lang=\"scss\">
p {
  color: $primary-color;
}
</style>

That's it! You have successfully configured global SCSS variables in your Vue project. Now you can use these variables across your components.