node脚手架下Vue的sass用法

1. 安装依赖

npm install sass-loader node-sass

2. 创建样式文件

目录结构

├─src
│  ├─assets
│      ├─scss
│        ├─base.scss
│        ├─iconfont.scss
│        ├─index.scss
│        ├─mixin.scss
│        ├─reset.scss
│        ├─variable.scss

文件内容示例

base.scss

基础样式表

.flex-center-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-end-center{
    display: flex;
    justify-content: end;
    align-items: center;
}

iconfont.scss

字体、图标样式表

.icon-triangle:before{
  content: '▲';
}

index.scss

将需要的样式做一个统一入口

@import "reset";
@import "base";
@import "iconfont";

mixin.scss

模块样式表

@mixin text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 函数式模块样式（像函数一样传参定义css样式）
@mixin flex-layout($justify:center, $align:center){  // $justify定义变量，后面的默认值，可选
  display: flex;
  justify-content: center;
  align-items: center;
}

reset.scss

重置原生标签样式

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  width: 100%;
  min-height: 100vh;
  background: $layout-background;
}

variable.scss

变量表

$layout-background: rgb(246, 248, 255);
$nav-bar-height: 64px;

$font-size-small: 12px;
$font-size-medium: 20px;
$font-size-large: 30px;

3. 全局导入

main.js

import '@/assets/scss/index.scss'

为了让src/assets/scss里的文件可以相互使用，需要预加载
vue.config.js

module.exports = defineConfig({
	css: {
		loaderOptions: {
			sass: {
			additionalData: `
				@import "@/assets/scss/variable.scss";
				@import "@/assets/scss/mixin.scss";
			`
			}
		}
	}
}

4. 使用

1. 样式

<div class="xxx icon-triangle"></div>

2. 变量

.xxx{
	width: calc(100vh - #{$nav-bar-height};   /* 注意参与计算时的用法 */
	font-size: $font-size-medium;
}

3. 模块样式表

.xxx{
	width: 100px;
	font-size: $font-size-medium;
	@include text-ellipsis;
	/* 函数式模块样式 */
	@include flex-layout(center, center)
	/* 或者不传参 */
	/* @include flex-layout */
}

注意：style标签要设置lang="scss"，即：<style scoped lang="scss"></style>