vue项目全局样式注入

声明： vue项目全局样式注入的优势在于避免重复编写相同的css样式，避免了代码的冗余

一、若想在全局当中适用全局变量，则须在项目中安装 sass和sass-loader(这里注意可能会出现版本与node版冲突因此推荐版本为sass：1.55.0 ，sass-loader：10.0.0以上)但是有时候版本过高也会出现冲突。这里本人的node版本为12.18.3

二、安装好以上两者之后就需要在项目中的config.js文件当中注入我们创建的css样式具体步骤如下：

①：引入相关的文件：

// 需要注入的样式配置
const importScssList = ['"~@/assets/scss/config.scss"','"~@/assets/scss/mixins.scss"'];

②：使用cssloder注入全局样式在module.exports中加入如下代码，就实现全局注入了 ：

module.exports = {
    productionSourceMap: false,
    css: {
        loaderOptions: {
            sass: {
                additionalData: `@import ${importScssList.join(',')} ;`,
            },
        },
        extract: false,
        sourceMap: false,
    },
   
};

三、在scss文件夹当中的mixins.scss文件写入混入样式

/*
	该 scss 文件中主要用于声明混入样式
*/

@mixin clearfix {
  &:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
  }
}

@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin flex-baseline {
  display: flex;
  align-items: baseline;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

四、在scss文件夹当中的config.scss文件中配置全局变量

/*
	该 scss 文件中主要用于声明基础样式
*/

$backgroundColor: #f7faff; // 主背景色
$linkColor: #0473ff; // a标签颜色
$navBarHeight: 88px; // 导航栏高度
$gray3: #333; // 基础灰色
$gray6: #666; // 基础灰色
$gray9: #999; // 基础灰色
$blue: #0473ff; // 基础蓝色
$red: #ff3b30; // 基础红色
$green: #28ada7; // 基础绿色

五、在scss文件夹当中的common.scss文件中引入mixins.scss文件的样式，相当于注册

/*
	该 scss 文件中主要用于清除默认样式，指定基础样式
*/
.clearfix {
  @include clearfix;
}
.flex-center {
  @include flex-center;
}

.flex-baseline {
  @include flex-baseline;
}

.flex-between {
  @include flex-between;
}

六、在main.js中引入common.scss公共样式：

import '@/assets/scss/common.scss';

七、经过以上的6步就可以在组件中直接使用全局样式了

<h3 class="common-content-title">

        {{ gasType === '2' ? '天然气表观变化趋势' : '消费量变化趋势' }}

</h3>
      

<style lang="scss" scoped>
#app {
  padding-top: $navBarHeight;
}
</style>

八、步骤图