vue项目如何配置全局 scss 样式文件

在开发过程中经常会有很多相同得样式需要修改等问题，这样我们可以配置全局得css样式有利于后期得维护，那么改如何配置呢

1、首先，确保你的项目已经安装了sass-loader和node-sass依赖。你可以使用以下命令安装它们：

npm install sass-loader node-sass --save-dev

2、在根目录下新建 `assets\styles` 文件夹，用于存放全局样式。然后在 `styles` 中新建 `global.scss`，尝试添加一个变量：

$theme-color: pink

我项目中用到得

@use 'sass:math';

// 根元素大小
$rootValue: 16;

#themeConfig {
	--blm-blue-color:#2658f5;
	--header-height:85px;
	--side-nav-width:240px;
	--primary-color: #1F2022; // 主要的字体颜色
	--layout-background-color: #f4f5f5; // 布局背景颜色
	--secondary-color: #86909c; // 次一级字体颜色，例如：文章描述
	--primary-background-color: #ffffff; // 主要的背景色
	--navbar-background-color: #ffffff; // navbar组件的背景色
	--blm-color-nav-title: #515767; // navbar组件字体颜色
	--link-color: #2658f5; // 链接 hover 上去的颜色
	--article-title-color: #000; // 文章标题字体颜色
	--article-desc-color: #86909c; // 文章描述字体颜色
	--article-hover-bg: #fafafa; // 文章hover背景颜色
	--border-line-color: #9797971a; // 边框颜色
	--blm-gray-3: #f7f8fa;
	--blm-brand-5-light: #eaf2ff;
	--blm-font-3: #8a919f;
	--blm-gray-1-2: rgba(228, 230, 235, 0.5);
	--btn-bg:radial-gradient(#2658f5, #4478fc)!important;
	--btn-shadow:0px 10px 10px -10px #4478fc
	
}



@mixin text-overflow($number: 1) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $number;
	line-clamp: $number;
	-webkit-box-orient: vertical;
}

// 写一个自定义函数，让 px 换算 rem 时，可以控制小数点的位数，要不计算出来太长了
// 第一个参数为需要处理的数值，第二个为小数点后取几位数
@function decimalRound($number, $digits: 0) {
	$n: 1;
	@if type-of($number) != number {
		@warn '#{ $number } is not a number.';
		@return $number;
	}
	@if type-of($digits) != number {
		@warn '#{ $digits } is not a number.';
		@return $number;
		// digits 不能带单位
	} @else if not unitless($digits) {
		@warn '#{ $digits } has a unit.';
		@return $number;
	}
	@if $digits > 0 {
		@for $i from 1 through $digits {
			$n: $n * 10;
		}
	}
	@return calc(round($number * $n) / $n);
}
//px-rem
@function torem($px) {
	@return decimalRound(math.div($px, $rootValue), 3) * 1rem;
}
:deep(.el-input__prefix) {
	cursor: pointer;
}

3、在 `nuxt.config.ts` 中配置即可。

export default defineNuxtConfig({

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/global.scss" as *;', // 注意文件路径要配成自己的
        },
      },
    },
  },
})

不是nuxt的话在 `vue.config.ts` 中配置，具体看你得业务

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/global.scss";`
      }
    }
  }
};

4、组件中使用不需要任何的引入直接可以使用全局 scss 定义的变量

div {

  color: $theme-color;

}