zoukankan      html  css  js  c++  java
  • SCSS历史介绍与配置

    学习版本:哔哩哔哩版本-SCSS从入门到实战

    参考地址:

     第一部分 SCSS历史介绍

    一、css预处理器出现的原因

    1、没办法写嵌套。

    2、没有变量,比如颜色只能用字面量。

    二、出名的CSS预处理器介绍

    1、SCSS/SASS

    07年SCSS诞生,SCSS是SASS的进化,人气最高

    2、LESS

    09年诞生,编程功能不够丰富

    3、Stylus

    10年诞生,人气不如前两者高,写后端的用的多

    三、SCSS与SASS的关系

    Sass有两套语法

    1、第一套是SCSS,更新,扩展名是.scss

    2、第二套是SASS,旧版本,扩展名是.sass,并不兼容css

    四、使用预处理器的优劣

    缺点:文件体积和复杂度不可控,增加了调试难度和成本

    五、选择SCSS的原因

     好用

    第二部分 环境配置(在vue中的安装与使用) 

    一、安装方式介绍

    1、不依赖编辑器

    node-sass模块

    2、依赖编辑器

    二、安装步骤

    1、不依赖编辑器

    (1)Node环境

    1-安装

    安装指令: cnpm i -g node-sass

    查看版本:node-sass -v

    为了避免因为版本导致的各种不兼容的问题,采用这两个安装指令:

    cnpm install sass-loader@7.3.1 --save-dev 

    cnpm install node-sass@4.14.1

    后来我还遇到了各种因为webpack导致的版本不兼容的问题,webpack版本对应的如下:

    wepack: 3.6.0

    webpack-dev-server: 2.9.1

    webpack-cli: 由于webpack版本低于4,不需要webpack-cli

    对应的vue版本为:2.5.2

    VScode配置

    安装Easy Sass(编译)和Sass(代码提示)这两个插件,注意区分大小写。

    我是在vue项目中想要使用sass,遇到了以下问题。

    第一个:安装sass后,要在webpack中对sass进行配置。

    参考文档:https://blog.csdn.net/duansamve/article/details/89412838

    第二个:兼容性的问题,报错Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 

    后来安装了node-sass@4.14.1 就成功了,但回家后发现package.json中没有node-sass,但是如果是5.0.0版本的话,package.json中会有node-sass. 

    参考文档:https://blog.csdn.net/weixin_42390302/article/details/109443294

    第三个:当我尝试卸载高版本loader的时候,又遇到了权限问题,

    报错:npm ERR! code EEXIST   npm ERR! syscall mkdir

    原因:这种报错是因为在vscode中的终端执行命令,权限不够,要在cmd中执行才行。

    参考文档:https://blog.csdn.net/qq_37086982/article/details/103488715

    第四个:安装的问题,报错:This dependency was not found:

    * !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/

    解决方法:先去package.json中,看看各种loader是不是都安装上了,主要是这几个:

    "css-loader": "^0.28.11",
    "sass-loader": "^7.3.1",
    "style-loader": "^2.0.0",
    "stylus-loader": "^5.0.0",
    如果确定这些loader都有,就再执行一遍cnpm install

    第五个:报错Module build failed: Error: Cannot find module 'node-sass'

    我在package.json中没有找到node-sass,原因看第二个问题。这个地方注意,安装node-sass的时候,不要安装高版本,会有兼容性问题,就像是第二个错误一样。

    参考文档:https://blog.csdn.net/qq_38401285/article/details/86483278

    第六个:scss与sass混用的问题,在style中引用的时候要使用 lang="scss",不要写lang="sass" 。报错:Invalid CSS after ".xxx{": expected "}", was "{" 

    参考文档:https://blog.csdn.net/zhangchao19890805/article/details/64122182

    第七个:

    报错: TypeError: this.getOptions is not a function

    原因:版本过高问题导致的

    查看版本指令: node-sass -v
    node-sass 5.0.0 (Wrapper) [JavaScript]
    libsass 3.5.5 (Sass Compiler) [C/C++]

    总结了以下各种能配合的版本:

    cnpm install sass-loader@7.3.1 --save-dev 

    "style-loader": "^2.0.0"
    cnpm install node-sass@4.14.1
    参考文档: https://www.cnblogs.com/bin521/p/11634340.html
     

     == 就装个sass,我把能遇到的报错都遇到了,nice呀

  • 相关阅读:
    SQL 语句优化中间表的使用优化
    SQL 语句优化OR 语句优化案例
    浅谈系统优化设计复杂运算放在逻辑层还是在数据库层?
    linux命令综合
    MySQL常用命令
    PHP知识点积累
    [Git] 生成token解决github remote: Support for password authentication was removed on August 13, 2021.
    [uniapp] GOFLY在线客服系统 uniapp增加播放背景音效或者按钮音效
    [Golang]gorm更新数据update 解决值为0时被忽略
    光阴真的是贱(似箭),一不小心就又过一年了
  • 原文地址:https://www.cnblogs.com/qingshanyici/p/14417579.html
Copyright © 2011-2022 走看看