css预编译sass和stylus简单使用 (带node-sass安装失败解决方案 )

53 篇文章 0 订阅
7 篇文章 0 订阅

目前css 流行的三大预编译有stylus、less 、 sass 说白了这些东西就是为了提高编码效率,更好的规整和简化 css代码的,相信大家less 就不用多说了用得都比较多了,在这里简单记录下stylus, sass

一、stylus使用

1、首先在package.json增加依赖

  "devDependencies": {
	    "style-loader": "^0.23.1",
	    "stylus": "^0.54.5",
	    "stylus-loader": "^3.0.2",
    }
    
2、定义外部 styl

定义额外的文件是以 .styl 为后缀 ,他可以文件中定义方法同时使用变量, 属性与值间可以 使用空格分隔,结尾不需要分隔符
如:


	// 背景图片
	bg-image($url)
	  background-image url($url + "@2x.png")
	  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
	    background-image: url($url + "@3x.png")


3、 文件中使用

在文件里写css 需要指定lang

<style lang="stylus" rel="stylesheet/stylus">

4、好处

styl 好处就是,可以定义方法,变量,元素与元素直接按html标签顺序一级一级往下写,看起来整洁分明,操作简单
不像普通css div>span这样去写子元素样式


<style scope lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable"
  @import "~@/common/stylus/mixin"

  .add-song
    position: fixed
    top: 0
    bottom: 0
    width: 100%
    z-index: 200
    background: $color-background
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)
    .header
      position: relative
      height: 44px
      text-align: center
      .title
        line-height: 44px
        font-size: $font-size-large
        color: $color-text

</style>

&就代表元素本身

二、 sass安装及使用

1、安装依赖
和styl 差不多 同样先安装依赖


  "devDependencies": {
    "node-sass": "^4.5.0",
    "sass": "^0.5.0",
    "sass-loader": "^5.0.1"
  }
  

经常出现如下错误

   gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'D:\\develop\\nodejs\\node.exe',
gyp verb cli   'D:\\learnReact\\admin-v2-fe\\node_modules\\_node-gyp@3.8.0@node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@15.5.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
.................................
在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。
生成启动时间为 2021/2/27 21:11:19。
节点 1 上的项目“D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\binding.sln”(默认目标)。
ValidateSolutionConfiguration:
  正在生成解决方案配置“Release|x64”。
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK2) 安装 Microsoft Visual Stu
dio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。 [D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\bi
nding.sln]
已完成生成项目“D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\binding.sln”(默认目标)的操作 - 失败。


生成失败。

“D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\binding.sln”(默认目标) (1) ->
(_src_\libsass 目标) ->
  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK2) 安装 Microsoft Visual S
tudio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。 [D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\
binding.sln]

    0 个警告
    1 个错误

但:这个里安装node-sass 要注意,不容易成功,如下不成功,run时会报错

在这里插入图片描述

解决办法可参考:

第一种解决方法

1、安装一个全局的 cnpm install node-sass -s -g 安装完成
2、D:\YLKJPro\temp>rmdir node_modules /s node_modules, 是否确认(Y/N)? y
删除原来的错误的node modules

3、再重新 cnpm install
成功了!

第二种解决方法

1、先运行:

 cnpm install -g node-gyp

2、然后运行:运行

cnpm install --global --production windows-build-tools

3、再增加一个 .npmrc文件 配置 淘宝源(注意:如果需要npm publish 时需要将最后的registry注释掉,否则就发布到淘宝了)

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

4、使用管理员打开cmd ,同时关闭所有的对c盘的操作,如文件下载等
5、将sass与node-sass版本修改为

    "sass-loader": "6.0.6",
    "node-sass": "^4.9.0"

6、再重新 cnpm install 或者 yarn
成功了!

在这里插入图片描述

第三种解决方法(切换nodejs版本)

今日安装一个项目依赖发现一直报错
错误日志

运行的时候还提示:
Syntax Error: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)

当初以为是node-sass版本问题,又换了几次依然如此,纠结!

后来在卸载node-sass 发现有可能是版本问题
卸载提示
从这个里面提示来看这个锅和版本脱不了关系

于是把nodejs 从15切换到了11
原本有两版本
只是这里原本就安装了两个版本
切换版本
没想到切换后安装就成功了

在linux 中安装node-sass

这个也是一个难啃的骨头,起初我是用的是15.5.0的nodejs,一致提示错误,
最开始提示

g++: command not found

然后就执行更新g++

yum -y update gcc
yum -y install gcc+ gcc-c++

后来还是报错,我就将版本降到了9.3.0
安装提示了一个gyp ERR! stack Error: EACCES: permission denied, mkdir '/opt/develper/git-repository/admin-v2-fe/node_modules/node-sass/.node-gyp'
在这里插入图片描述
看这个提示应该是一个安装权限的问题,后来网上搜索了一下,把安装命令改了一下,同时开启一个代理

npm install --unsafe-perm=true --allow-root

最后跑了如下一片g++检查终于成功了
在这里插入图片描述

使用方法

基本和stlus 没太大区别

指定lang

<style lang="stylus" rel="stylesheet/stylus">

按标签层级写 样式即可


	<style scoped lang="scss">
	    .return-trend{
	        .infect-con{
	            width: 100%;
	            height: 200px;
	            margin-top:10px;
	            .return-panel{width: 100%;height: 100%}
	        }
	        .infect-caption{
	            font-size: 18px;
	            color: #82d4ff;
	        }
	
	    }
	</style>
	

其他具体用法可以参考官网

sass

英文文档 https://sass-lang.com/guide

中文文档 https://www.sass.hk/guide/

stylus

stylus官网 http://stylus-lang.com/
stylus中文网 https://stylus-lang.net/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑的痕迹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值