uni-app 全局使用scss

最新推荐文章于 2024-06-28 09:58:23 发布
最新推荐文章于 2024-06-28 09:58:23 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： # uni-app 文章标签： uni-app scss css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46051479/article/details/126402737
版权
在uni-app项目中全局使用SCSS时，只需将样式定义在根目录的中，或者通过@import指令引入其他地方定义的SCSS文件。注意@import需避免.css后缀，且scss文件不能放在static目录下，以免无法正确解析。
摘要由CSDN通过智能技术生成

这个在做项目时遇到的问题，当时把scss文件放在了static下面一直操作不成功

使用方法：

  1. 全局使用很简单就直接在根目录下的uni.scss中定义就好
  2. 也可以在其他地方定义在用@import 引入，这个要注意两点
    1. @import的使用
      要使用
      @import "@/common/common.scss";
      不能使用(会当做普通 的css文件加载)
      @import url("@/common/common.scss");
    2. scss文件放置的文件夹
      不能把scss文件放置在static下（不能被解析）
      3. 
  
    3. 


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  想吃凤梨酥
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
uni-app项目中使用scss语法

				
			

			

				

					草灯的专栏
				

				

					02-15
					
					3万+
					
				

			

		

		

			
				
如何在uni-app项目中使用scss语法。我的win7 64位系统
最简单的方法如下：
点击菜单栏中的“工具 – 插件安装 – scss/sass编译”  点击安装，如果成功了，就可以正常使用了。
很不幸的是，我的提示失败了

然后我又找到D:\HBuilderX\plugins\compile-node-sass插件目录，执行npm install，仍然提示失败：
这里写自定义目录标题欢迎使用...

			
		

	



                

              
                



	

		

			

				
					
uniapp引入外部sccs文件

				
			

			

				

					weixin_42017221的博客
				

				

					02-07
					
					828
					
				

			

		

		

			
				
这里我们在index.vue页面中引入了styles.scss文件，并在页面中使用了.btn样式。注意，我们可以在页面的SCSS样式中定义新的样式规则并使用已定义的样式。要在uni-app中引入外部SCSS文件，需要使用@import指令。3. 在需要引入的页面中，使用@import指令来引入该文件。1. 创建一个.scss文件，例如styles.scss。这样就可以成功引入外部的SCSS文件啦！2. 在该文件中编写SCSS代码。4. 在页面中使用已定义的样式。

			
		

	



                


  
              

                


	

		

			

				
					
【VUE3】uniapp + vite中 uni.scss 使用 /deep/ 不生效（踩坑记录三）

					
最新发布

				
			

			

				

					weixin_44216637的博客
				

				

					06-28
					
					572
					
				

			

		

		

			
				
uniapp + vite中 uni.scss 使用 /deep/ 不生效

			
		

	





	

		

			

				
					
uni-app中使用scss的示例代码

				
			

			

				

					12-14
				

			

		

		

			
				
遇到的坑
整个一个下午我都在解决uni-app中使用scss的坑，首先说一下我的问题，在用scss时一直不能使用@mixin，然后百度各种办法调试：
代码写法问题（完全按官网的写法来的不可行）: 官网demo 
浏览器问题（换火狐不行）。
语法版本问题（换了写法同样不行）: scss使用mixin不生效，浏览器无法编译出来
插件没有安装上（重装还是不好使）。
把<style type=’css’> 改成了 scss ， 还是不行。
使用scss新语法还时不行

整个一下午实在是弄不出来，没办法的情况下，想着直接用vue的中安装scss的方法来操作一下试试，结果还真可以了。
需要注意的是不能全局

			
		

	



		

			
		



	

		

			

				
					
uniapp 添加scss全局变量、scss公共类

					
热门推荐

				
			

			

				

					我的博客
				

				

					05-18
					
					2万+
					
				

			

		

		

			
				
一、创建scss变量文件variable.scss和公共类文件common.scss，放在目录/src/static/css/下

variable.scss


// 主题色
$primary-color: #0099FF;

// 其他变量
......

若要添加其他变量直接在文件里加即可。



common.scss


@import './variable.scss';
// 公共类
.color-primary {
  color: $primary-color;
}
.bg-primary

			
		

	





	

		

			

				
					
uni-app全局引入scss文件的不同方式

				
			

			

				

					Moon Star
				

				

					11-01
					
					1万+
					
				

			

		

		

			
				
1. 使用config方式引入

在项目下创建vue.config.js文件


module.exports = {
	css: {
		loaderOptions: {
			scss: {
				prependData: `@import "~@/static/style/index.scss";`
			}
		}
	}
}



Tips：根据scss版本确定配置，版本低的使用“data”，高的使用“prependData”


在/static/style/index.scss文件中，引入其他

			
		

	





	

		

			

				
					
uni-app uni.scss内置全局样式变量

				
			

			

				

					java1234的博客
				

				

					12-27
					
					1722
					
				

			

		

		

			
				
是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，

			
		

	





	

		

			

				
					
【自用】uniapp全局统一样式scss管理

				
			

			

				

					qq_43364234的博客
				

				

					03-30
					
					1025
					
				

			

		

		

			
				
【自用】uniapp全局统一样式scss管理。

			
		

	





	

		

			

				
					
很好用的uni-app节点树组件！

				
			

			

				

					06-23
				

			

		

		

			
				
5. **uni.scss**：可能是uni-app的全局样式文件，使用SCSS预处理器语言来编写CSS。 6. **App.vue**：uni-app的主组件，包含了应用的根Vue实例。 7. **static**：通常存放静态资源，如图片、字体等。 8. **pages**：...

			
		

	





	

		

			

				
					
uni-app-小程序自定义底部菜单样式示例

				
			

			

				

					08-12
				

			

		

		

			
				
2. 在每个页面的配置（例如：pages/index/index.vue）中，使用自定义的底部导航组件，并通过`uni-app`的`mpvue-page-factory`将页面实例传递给组件，以便于获取当前页面索引。  ```html   <!-- 页面内容 -->  ...   ...

			
		

	





	

		

			

				
					
uni-app 全局scss

				
			

			

				

					如果人生就像一场梦，那就希望你做个好梦！
				

				

					12-05
					
					3978
					
				

			

		

		

			
				
1.以uni-app框架开发，文件下面都会有个uni.scss的样式文件

2.把其他的scss全部集成到一个地方管理，我这里是集成到了base.scss样式文件里面，然后直接把base.scss引入uni.scss下面就可以了

-------------本人菜鸟一枚，大家共同学习

...

			
		

	





	

		

			

				
					
uni-app中使用scss

				
			

			

				

					weixin_44003190的博客
				

				

					05-27
					
					1万+
					
				

			

		

		

			
				
项目总结—scss篇
1.配置
1.1 vue
1.2 react
1.3 uniapp
2. 引入scss
先将所有scss合并到index.scss中
@import "../base.scss"
@import "../form.scss"

在main.js中引入即可
import "../index.scss"

3. 全局配置-global
有两个scss比较特殊，一个是global，...

			
		

	





	

		

			

				
					
uniapp中使用scss

				
			

			

				

					yigeboke的博客
				

				

					02-26
					
					2036
					
				

			

		

		

			
				
在项目中有几个相同的样式,比如下边的 flex 我们可以把它写成一个变量,通过混合器应用 @mixin标识符定义,下边的这段sass代码



在 uni.scss中增加如下代码:

@mixin  chenflex {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}

然后再页面使用时再需要用到的地方这样写


.title{
      width: 100%;
  ..

			
		

	





	

		

			

				
					
uniapp scss 的用法

				
			

			

				

					qq_60056854的博客
				

				

					04-14
					
					2683
					
				

			

		

		

			
				
scss的一些基本用法




			
		

	





	

		

			

				
					
uni-app 如何在代码中使用定义的scss变量

				
			

			

				

					BradenHan的专栏
				

				

					04-25
					
					3379
					
				

			

		

		

			
				
1. 使用全局SCSS变量定义全局变量在uni-app项目中，通常有一个名为uni.scss的全局样式文件，用于存放项目级的SCSS变量、混合（mixins）、函数等。// 其他变量、混合、函数等...在组件或页面中使用全局变量在Vue单文件组件（SFC）的

			
		

	





	

		

			

				
					
Uniapp引入全局CSS

				
			

			

				

					m0_37792384的博客
				

				

					07-16
					
					4950
					
				

			

		

		

			
				
引入全局CSS的好处：方便管理，不用在赋值粘贴重复的代码，一次配置“终身（项目）可用！”
1.编写自己的CSS
例如自己习惯使用的CSS，因为之前做的安卓开发写代码的时候也会有些安卓的思想…
/**
 * 主体
 */
.base_body {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* 水平，垂直居中 */
.base_all_center {
	display: flex;
	justify-content: center;
	alig

			
		

	





	

		

			

				
					
uni-app插件开发——使用scss

				
			

			

				

					辣辣的草莓酱
				

				

					03-23
					
					2022
					
				

			

		

		

			
				
uni-app插件开发指南实名认证安装sass安装Ruby使用ruby安装sass和compass开发插件
实名认证
这个按照DCloud网站的要求完后即可。
安装sass
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，[安装sass中文网]查看详细安装步骤。(https://www.sass.hk/install/)（注:mac下自带Ruby无需在安装Ruby!）
安装R...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值