uni-app sass

最新推荐文章于 2024-08-22 21:17:46 发布

A_bad_horse

最新推荐文章于 2024-08-22 21:17:46 发布

阅读量1k

点赞数

分类专栏：小程序文章标签： uni-app

本文链接：https://blog.csdn.net/A_bad_horse/article/details/113762521

版权

小程序专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文介绍了在开发过程中遇到的由于未安装Sass依赖而引发的SCSS错误。Sass是一种CSS预处理器，提供变量、嵌套规则等功能，提升CSS编写效率。修复问题的方法包括更新`package.json`文件，指定`node-sass`和`sass-loader`版本，然后执行`npm install`。文章还展示了Sass的基本用法，包括变量、嵌套选择器和混合使用。

摘要由CSDN通过智能技术生成

没有安装sass依赖，使用scss时报错如下：

dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch

Sass介绍

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

Sass使用方法（在vue文件下的style标签添加lang="scss"属性即可）

<style lang="scss">

</style>

Sass安装

方法一（放弃）

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install sass-loader node-sass (安装的是最新版本，会报错)

方法二 (成功)

1. update package.json

...

"node-sass": "^4.0.0",
"sass-loader": "^7.3.1",

...

"devDependencies": {
	"@dcloudio/types": "*",
	"@dcloudio/uni-automator": "^2.0.0-30720210122002",
	"@dcloudio/uni-cli-shared": "^2.0.0-30720210122002",
	"@dcloudio/uni-migration": "^2.0.0-30720210122002",
	"@dcloudio/uni-template-compiler": "^2.0.0-30720210122002",
	"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-30720210122002",
	"@dcloudio/vue-cli-plugin-uni": "^2.0.0-30720210122002",
	"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-30720210122002",
	"@dcloudio/webpack-uni-mp-loader": "^2.0.0-30720210122002",
	"@dcloudio/webpack-uni-pages-loader": "^2.0.0-30720210122002",
	"@vue/cli-plugin-babel": "~4.5.0",
	"@vue/cli-service": "~4.5.0",
	"babel-plugin-import": "^1.11.0",
	"cross-env": "^7.0.3",
	"jest": "^25.4.0",
	"mini-types": "*",
	"miniprogram-api-typings": "*",
	"node-sass": "^4.0.0",
	"postcss-comment": "^2.0.0",
	"sass-loader": "^7.3.1",
	"vue-template-compiler": "^2.6.11"
},

2. npm install

Sass 基本用法讲解

<style lang="scss">
.container {
	width: 100%;
	padding: $uni-spacing-row-lg;
	&_text {
		font-size: $uni-font-size-sm;
		text-indent: 2em;
		color: $uni-text-color;
		padding-bottom: $uni-spacing-col-sm;
	}
}
</style>

可以直接使用scss文件那边对应的变量值，比如单位大小、颜色，单位大小可以使用运算符进行基本运算。
使用scss后，对于同一个父元素下的元素，可以直接在该父元素选择器下，以层级嵌套来使用。
可以使用“&”符号来拼接选择器，“&”相当于父选择器占位符，如下解析为： .container_text
在scss中使用@mixin定义方法，用@include调用（具体去官网自己看），单个页面引用scss文件：@import './style/mixin.scss';