scss文件::v-deep无效（将scss文件转换成css文件）

大家平时做项目肯定都习惯了使用scss或者less去写样式             ，如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css             。那如果我们没有使用工程化
 
  
 
  
 
  
 
  
 
  
 
  
 ，比如简单的demo或者官网等项目又希望可以通过scss去编写文件应该怎么办呢












，我们可以借助sass插件去帮我们转换生成css样式文件  
  
  
  
  
  
 ，原理和工程化其实是一样的 
  
  
  
  
  
  ，只是我们手动的去触发了sass的能力
 
  
 
  
 
  
 
  
 
  
 
  
 。

1.安装sass

首先在我们的项目下安装sass

npm i sass

2.使用命令转译scss或sass文件

假设我们的页面都在page目录下


 


 


 


 


 


 

，每个页面为一个文件夹 
 
 
 
 
 
，存放的是html文件和scss文件  
   
   
   
   
   
   ，例如下面的index

在index.html文件中我们无法直接使用scss文件

 

 

 

 

 

 
，所以我们可以使用下面的命令先将scss文件转译为css文件： sass .\index.scss .\index.css

注意控制台的起始路径
 

 

 

 

 

 

，路径拼接以后一定要指向一个具体的文件












。假如我的项目名为demo             ，它存放在D盘的project文件夹下
 

 
 

 
 

 
 

 
 

 
 

 
 ，我的控制台的窗口显示起始路径假设为D:\project












，那么我们的命令应该更改为：

sass .\demo\page\index\index.scss .\demo\page\index\index.scss

运行这段命令后sass会将我们指定的scss文件转换为css文件

这个时候我们就可以在html中引入转换好的css文件

3.监听scss变化更新css文件

在开发中如果我们总是手动输入命令去生成css文件这肯定是让人无法忍受的                   ，所以我们可以借助一个指令去完成监听
 
 
 
 
 
 
 
 
 
 
 
 
 ，它就是--watch


















，当我们输入如下命令时

sass --watch .\demo\page\index\index.scss .\demo\page\index\index.scss

这个时候就会开启指定文件的更改监听             ，每当我们更改保存index.scss文件时
 
  
 
  
 
  
 
  
 
  
 
  
 ，index.css都会自动被更新  
  
  
  
  
  
 。