项目sass遇到的坑

1.项目背景：

项目中需要做做主题切换，包含大屏的主题切换，我首先想到的方法就是使用sass mixin样式混入。

2.开始实践

    1.首先安装sass 
         `npm list node-sass sass-loader`
    2.修改对应样式为scss 或sass
        1）scss:大括号语法;支持单行注释 //（不会出现在编译后的 CSS 中）支持多行注释 /* */（默认会保留在 CSS 中，且必须带分号。
        2）sass:法缩进语法,-通过缩进（2 或 4 个空格）表示代码层级;仅支持多行注释 /* */，且不能带分号。
    

/* scss */
.container {
  width: 100%;
  padding: 20px;
  .title {
    font-size: 24px;
    color: #333;
  }
}

/* sass */
.container
  width: 100%
  padding: 20px
  
  .title
    font-size: 24px
    color: #333

3.遇到的问题

1.写完代码之后运行报错查看报错之后发现sass版本问题sass对webpack和sass-loader有版本要求
Dart Sass (sass)	sass-loader	webpack	
^1.69.5 (最新)	^13.3.2	        5.x	  
^1.32.13	          ^7.3.1	 3.x/4.x	
^1.59.3	         ^12.6.0	 4.x/5.x
安装对应版本之后解决问题
2.打包不成功 反复尝试之后发现 OptimizeCSSPlugin 样式压缩插件注释之后就能打包了，说明样式出了问题但是控制台有没有报错寻找问题大海捞针而且打包之后也看不到错误，查阅资料之后发现一个sass很好用的命令`npx sass src/**/xx.scss `，它会验证是否存在语法问题，并抛出问题

这个地方写了个/deep/

/deep/	Vue 2 专有	Vue 2 + Webpack	维护旧 Vue 2 项目
>>>	Vue 2 专有	Vue 2 + Webpack	维护旧 Vue 2 项目
::v-deep	Vue 3 专有	Vue 3 + 任意构建工具	现代 Vue 3 项目
:deep()	CSS 标准	原生 Shadow DOM、Vue 3	跨框架项目或原生 CSS 项目
查阅资料之后vue2项目中`/deep/` 或 `>>>`都行但是不知道为什么打包会出错，修改为>>> 之后打包成功。