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

叁歲伎倆 2023-07-09 02:22 78阅读 0赞

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

### 文章目录 ###

*   *   *  一、stylus使用
         *   *  1、首先在package.json增加依赖
             *  2、定义外部 \`styl\`
             *  3、 文件中使用
             *  4、\*\*好处\*\*
         *  二、 sass安装及使用
         *   *  第一种解决方法
             *  第二种解决方法
             *  在linux 中安装node-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`这样去写子元素样式

`&`就代表元素本身

### 二、 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 []
    gyp verb clean removing "build" directory
    gyp verb command configure []
    gyp verb download using dist-url https://npm.taobao.org/mirrors/node
    gyp verb check python checking for Python executable "python2" in the PATH
    gyp verb `which` failed Error: not found: python2
    gyp verb `which` failed     at getNotFoundError (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:13:12)
    gyp verb `which` failed     at F (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:68:19)
    gyp verb `which` failed     at E (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:80:29)
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:89:16
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_isexe@2.0.0@isexe\index.js:42:5
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_isexe@2.0.0@isexe\windows.js:36:5
    gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21)
    gyp verb `which` failed  python2 Error: not found: python2
    gyp verb `which` failed     at getNotFoundError (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:13:12)
    gyp verb `which` failed     at F (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:68:19)
    gyp verb `which` failed     at E (D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:80:29)
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_which@1.3.1@which\which.js:89:16
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_isexe@2.0.0@isexe\index.js:42:5
    gyp verb `which` failed     at D:\learnReact\admin-v2-fe\node_modules\_isexe@2.0.0@isexe\windows.js:36:5
    gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21) { 
    gyp verb `which` failed   code: 'ENOENT'
    gyp verb `which` failed }
    gyp verb check python checking for Python executable "python" in the PATH
    gyp verb `which` succeeded python D:\develop\Python27\python.EXE
    gyp verb check python version `D:\develop\Python27\python.EXE -c "import sys; print "2.7.9 gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
    gyp verb get node dir no --target version specified, falling back to host node version: 15.5.0
    gyp verb command install [ '15.5.0' ]
    gyp verb download using dist-url https://npm.taobao.org/mirrors/node
    gyp verb install input version string "15.5.0"
    gyp verb install installing version: 15.5.0
    gyp verb install --ensure was passed, so won't reinstall if already installed
    gyp verb install version is already installed, need to check "installVersion"
    gyp verb got "installVersion" 9
    gyp verb needs "installVersion" 9
    gyp verb install version is good
    gyp verb get node dir target node version installed: 15.5.0
    gyp verb build dir attempting to create "build" dir: D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build
    gyp verb build dir "build" dir needed to be created? D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build
    gyp verb Not using VS2017: Could not use PowerShell to find VS2017
    gyp verb build/config.gypi creating config file
    gyp verb build/config.gypi writing out config file: D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\build\config.gypi
    gyp verb config.gypi checking for gypi file: D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\config.gypi
    gyp verb common.gypi checking for gypi file: D:\learnReact\admin-v2-fe\node_modules\_node-sass@4.7.2@node-sass\common.gypi
    gyp verb gyp gyp format was not specified; forcing "msvs"
    gyp info spawn D:\develop\Python27\python.EXE
    gyp info spawn args [
    gyp info spawn args   'D:\\learnReact\\admin-v2-fe\\node_modules\\_node-gyp@3.8.0@node-gyp\\gyp\\gyp_main.py',
    gyp info spawn args   'binding.gyp',
    gyp info spawn args   '-f',
    gyp info spawn args   'msvs',
    gyp info spawn args   '-G',
    gyp info spawn args   'msvs_version=auto',
    gyp info spawn args   '-I',
    gyp info spawn args   'D:\\learnReact\\admin-v2-fe\\node_modules\\_node-sass@4.7.2@node-sass\\build\\config.gypi',
    gyp info spawn args   '-I',
    gyp info spawn args   'D:\\learnReact\\admin-v2-fe\\node_modules\\_node-gyp@3.8.0@node-gyp\\addon.gypi',
    gyp info spawn args   '-I',
    gyp info spawn args   'C:\\Users\\Lenovo\\.node-gyp\\15.5.0\\include\\node\\common.gypi',
    gyp info spawn args   '-Dlibrary=shared_library',
    gyp info spawn args   '-Dvisibility=default',
    gyp info spawn args   '-Dnode_root_dir=C:\\Users\\Lenovo\\.node-gyp\\15.5.0',
    gyp info spawn args   '-Dnode_gyp_dir=D:\\learnReact\\admin-v2-fe\\node_modules\\_node-gyp@3.8.0@node-gyp',
    gyp info spawn args   '-Dnode_lib_file=C:\\Users\\Lenovo\\.node-gyp\\15.5.0\\<(target_arch)\\node.lib',
    gyp info spawn args   '-Dmodule_root_dir=D:\\learnReact\\admin-v2-fe\\node_modules\\_node-sass@4.7.2@node-sass',
    gyp info spawn args   '-Dnode_engine=v8',
    gyp info spawn args   '--depth=.',
    gyp info spawn args   '--no-parallel',
    gyp info spawn args   '--generator-output',
    gyp info spawn args   'D:\\learnReact\\admin-v2-fe\\node_modules\\_node-sass@4.7.2@node-sass\\build',
    gyp info spawn args   '-Goutput_dir=.'
    gyp info spawn args ]
    Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
    Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
    Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
    Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
    gyp verb command build []
    gyp verb download using dist-url https://npm.taobao.org/mirrors/node
    gyp verb build type Release
    gyp verb architecture x64
    gyp verb node dev dir C:\Users\Lenovo\.node-gyp\15.5.0
    gyp verb found first Solution file build/binding.sln
    gyp verb could not find "msbuild.exe" in PATH - finding location in registry
    gyp info spawn C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
    gyp info spawn args [
    gyp info spawn args   'build/binding.sln',
    gyp info spawn args   '/nologo',
    gyp info spawn args   '/p:Configuration=Release;Platform=x64'
    gyp info spawn args ]
    在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/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时会报错

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

解决办法可参考：

#### 第一种解决方法 ####

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`  
成功了！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]

#### 在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'`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]  
看这个提示应该是一个安装权限的问题，后来网上搜索了一下，把安装命令改了一下，同时开启一个代理

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

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

#### 使用方法 ####

基本和stlus 没太大区别

指定`lang`

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

按标签层级写 样式即可

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

**sass**

[英文文档 https://sass-lang.com/guide][https_sass-lang.com_guide]

[中文文档 https://www.sass.hk/guide/][https_www.sass.hk_guide]

**stylus**

[stylus官网 http://stylus-lang.com/][stylus_ http_stylus-lang.com]  
[stylus中文网 https://stylus-lang.net/][stylus_ https_stylus-lang.net]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227153617698.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200227165503235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210328211331988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210328211634508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[https_sass-lang.com_guide]: https://sass-lang.com/guide
[https_www.sass.hk_guide]: https://www.sass.hk/guide/
[stylus_ http_stylus-lang.com]: http://stylus-lang.com/
[stylus_ https_stylus-lang.net]: https://stylus-lang.net/