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

目前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 SDK；2) 安装 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 SDK；2) 安装 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/