vue如何使用公共样式scss

在Vue项目中使用公共样式SCSS非常简单，有1、通过配置全局样式文件，2、使用SCSS模块，3、在组件中引入公共样式等多种方法。通过这些方法，你可以将公共样式应用到项目中的每个组件，有效提高开发效率和代码复用性。

一、通过配置全局样式文件

在Vue项目中，你可以通过在main.js文件中引入全局样式文件，使其在整个项目中生效。步骤如下：

创建一个公共的SCSS文件，例如src/assets/styles/global.scss。
在global.scss文件中编写你的公共样式。
在main.js文件中引入这个全局样式文件。

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './assets/styles/global.scss'; // 引入全局样式文件
new Vue({
  render: h => h(App),
}).$mount('#app');

二、使用SCSS模块

另一种方法是使用SCSS模块，这种方法可以使样式局部化，避免样式冲突。步骤如下：

创建一个公共的SCSS文件，例如src/assets/styles/global.scss。
在需要使用公共样式的组件中引入这个SCSS模块。

/* src/assets/styles/global.scss */
$primary-color: #3498db;
.button {
  background-color: $primary-color;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
}

<!-- src/components/ExampleComponent.vue -->
<template>
  <button class="button">Click Me</button>
</template>
<script>
export default {
  name: 'ExampleComponent',
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/global.scss';
</style>

三、在组件中引入公共样式

你还可以在每个组件的样式部分中单独引入公共样式文件，这样可以保证每个组件都能使用到这些样式。

创建一个公共的SCSS文件，例如src/assets/styles/global.scss。
在每个需要使用公共样式的组件中引入这个SCSS文件。

<!-- src/components/AnotherComponent.vue -->
<template>
  <div class="container">
    <p class="text">Hello World</p>
  </div>
</template>
<script>
export default {
  name: 'AnotherComponent',
};
</script>
<style lang="scss">
@import '@/assets/styles/global.scss';
.container {
  .text {
    color: $primary-color;
  }
}
</style>

四、配置Webpack自动引入公共样式

为了更方便地使用公共样式，你可以配置Webpack使其自动引入公共样式文件。步骤如下：

在项目根目录创建一个vue.config.js文件（如果没有的话）。
配置vue.config.js文件，使其自动引入公共样式文件。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/global.scss";`
      }
    }
  }
};

通过这种方式，你无需在每个组件中手动引入公共样式文件，Webpack会自动为你处理。

五、使用第三方库的公共样式

如果你使用的是一些第三方UI库（如Vuetify、Element-UI等），这些库通常会提供一些公共样式，你只需要在项目中引入这些库的样式文件即可。

// 以引入Vuetify为例
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
new Vue({
  vuetify: new Vuetify(),
}).$mount('#app');

总结起来，使用公共样式SCSS有多种方法，包括配置全局样式文件、使用SCSS模块、在组件中引入公共样式、配置Webpack自动引入公共样式以及使用第三方库的公共样式。根据你的项目需求和开发习惯，选择最适合你的方法，可以提高开发效率和代码的可维护性。