uni-app sass

The sass dependency is not installed, and the following error is reported when using scss:

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

Sass introduction

Sass (English full name: Syntactically Awesome Stylesheets) is a cascading style sheet language originally designed by Hampton Catlin and developed by Natalie Weizenbaum.

• Sass is a CSS preprocessor.
• Sass is a CSS extension language that can help us reduce CSS duplication and save development time.
• Sass is fully compatible with all versions of CSS.
• Sass extends CSS3, adding features such as rules, variables, mixins, selectors, inheritance, built-in functions, and more.
• Sass generates well-formatted CSS code, which is easy to organize and maintain.
• Sass files have the suffix .scss.

How to use Sass ( add lang="scss" attribute to the style tag under the vue file )

<style lang="scss">

</style>

Sass installation

Method one ( abandon )

1. npm install -g cnpm --registry=https://registry.npm.taobao.org
2. cnpm install sass-loader node-sass ( The latest version is installed, an error will be reported )

Method two (success)

1. update package.json

...

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

...

2. npm install

Sass basic usage explanation

<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>

• You can directly use the corresponding variable values ​​in the scss file, such as unit size, color, and unit size can use operators to perform basic operations.
• After using scss, the elements under the same parent element can be used directly under the parent element selector in hierarchical nesting.
• You can use the "&" symbol to splice selectors, "&" is equivalent to the parent selector placeholder, which is parsed as follows:   .container_text
• Use @mixin to define the method in scss, use @include to call (see the official website for details), a single page refers to the scss file: @import'./style/mixin.scss';