微信小程序中使用SCSS编译WXSS

7月前作者：吃饱就写BUG 分类：Toy博客阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序中使用SCSS编译WXSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

旧版本的微信小程序是需要导入sass,新版本直接使用配置

!!!!!!!建议二选一去使用，防止冲突目前我使用的是旧版本的配置Sass!!!!!!!!!!

新版本微信开发者工具直接在project.config.json中配置SASS

1.project.config.json文件中添加如下代码

新版本开发者工具中的隐式设置可直接编译插件配置，在project.config.json加入以下代码即可编译SASS（参考项目配置文件 | 微信开放文档）

目前支持编译插件有 typescript、less、sass

{
  "setting": {
    "useCompilerPlugins": [
      "sass"
    ]
  }
}

2.删除原有的.wxss文件或者把.wxss改成.scss

wxss和scss,微信小程序,scss,小程序

3.在.scss中编写样式，可以看到支持sass

wxss和scss,微信小程序,scss,小程序

如果在配置project.config.json以前使用了旧版配置，一定要先把easysass禁用掉

旧版微信小程序开发中使用scss步骤如下：

1、安装了easySass

首先确定Vscode中已经安装easySass，我们将Vscode中的导入微信小程序开发工具中

wxss和scss,微信小程序,scss,小程序

2、进入小程序开发工具，导入easySass

wxss和scss,微信小程序,scss,小程序

3、修改配置文件

导入完成以后点击编辑--》打开编辑器扩展目录

wxss和scss,微信小程序,scss,小程序

wxss和scss,微信小程序,scss,小程序

4、修改easySass的package.json文件

修改easysass.formats中default的内容，修改后如下

wxss和scss,微信小程序,scss,小程序

5、重启项目就可以使用

在使用的时候就不要再在.wxss中去编写样式，直接在需要的地方新建一个.scss结尾的文件，在这个文件里编写样式，编写完成后对应的.wxss中会生成相应的样式，

一般使用.scss后就不要去修改删除对应的.wxss，否则样式会不生效

wxss和scss,微信小程序,scss,小程序

wxss和scss,微信小程序,scss,小程序文章来源地址https://www.toymoban.com/news/detail-853009.html

到了这里，关于微信小程序中使用SCSS编译WXSS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

uni-app 之安装uView，安装scss/sass编译

uni-app 之安装uView，安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部，工具，插件安装，安装新插件 image.png image.png 安装成功！注意，一定要先登录才可以安装 image.png 1. 引入uView主JS库在项目根目录中的 main.js 中，引入并使用uView的JS库，注意这两行要放在 import Vu

2024年02月10日
浏览(52)
vue使用scss

下载node/确认node版本 node版本使用node -v命令查看安装node-sass、sass-loader node、node-sass、sass-loader版本需要对应，node-sass和sass-loader使用npm list命令查看，node和node-sass对应关系如下表： node-sass和sass-loader的对应关系如下： sass-loader 4.1.1，node-sass 4.3.0 sass-loader 7.0.3，node-sass 4.7.2 sa

2024年02月03日
浏览(38)
scss基本使用

$符号标识来定义变量变量名用中划线和下划线分隔其实是表示一个意思 $color_base和$color-base其实指向的是同一个变量。父选择器的标识符群组选择器的嵌套子组合选择器和同层组合选择器：、+ 和 ~ 嵌套属性导入SASS文件 css和sass区别 1. css导入的css文件是在执行到@important的

2024年02月03日
浏览(36)
vue项目中使用scss

sass-loader：把 sass编译成css sass-loader：nodejs环境中将sass转css 提示：限制 node-sass，sass-loader 版本号，防止默认安装的版本号过高版本对应关系：提示：在 build 文件夹目录下 webpack.base.conf.js 文件中，找到 rules 添加以下代码提示：在组件中style标签上添加属性 lang=\\\"scss\\\"，保存运

2024年02月17日
浏览(45)
Frontend - SASS / SCSS 文件使用

目录一、安装所需依赖 1. django-compressor 2. django-sass-processor 二、settings.py 文件配置三、html使用 1. 配置 2. 导入 1. django-compressor 2. django-sass-processor 安装依赖，可参考另一篇文章：Backend - 安装依赖（pip 、tar.gz）_python通过tar.gz包安装依赖包-CSDN博客 1. 配置 2. 导入

2024年01月24日
浏览(42)
五、全局scss变量定义及使用

定义 variable.scss 存放全局变量配置在vite.config.ts文件配置如下: @import \\\"./src/styles/variable.less\\\"; 后面的 ; 不要忘记，不然会报错 ! 使用直接使用使用暴露的变量名

2024年02月19日
浏览(38)
scss语法，使用for循环批量设置class类

现在我们写项目一般都是用scss写css，相关知识可以参考这篇文章。 scss中可以使用for循环批量设置具有相同规则的类，设计图中经常有不同透明度的颜色，如下：我们就可以把不同透明度的颜色都设置成一个class，当然可以一个一个写，但是就很麻烦，所以我们可以使用scs

2024年02月14日
浏览(37)
使用scss/less修改vant UI样式的方法

在vue实际项目开发中，我们避免不了使用一些开源的UI组件库，style的样式中都会增加 scoped 标识只会在当前页面中去使用，这就涉及到了如何修改默认组件样式的问题了。 1.在使用scss的情况下，要使用::v-deep，/deep/是不支持的，会报错。 2.在使用less的情况下，使用::v-deep或

2024年02月13日
浏览(34)
scss使用自定义函数实现单位像素随屏幕比例动态缩放

vue中通过变量和scss函数来动态实现动态缩放像素简单来说就是比例缩小时，像素单位变大，从而字体大小相对不变，以下仅处理比例缩小的状况自定义一个属性–size，初始值为1px template map为：{100: 1, 90: 1.1, 80: 1.2, 75: 1.3, 67: 1.5, 50: 2, 33: 3, 25: 4 } 屏幕100%时，size=1 = mpx(1) = 1p

2024年02月07日
浏览(30)
css,less,scss中的深度选择器，结合elementUi使用

css中深度选择器用到的是加类名可以很方便的找到自己想要修改的样式 lees中用到 /deep/ 加类名 scss中用到::v-deep 加类名

2024年02月13日
浏览(42)