1前言通常我们现在新建项目使用脚手架，选择SASS、LESS等预编译语法非常方便。vuecreateuingnewyour_application--style=scss但是在我们项目开发进行到一半的时候，有一天我们研究了一些东西之后突然发现使用scss比css好用多了。这时候，我们就会面临一个很大的问题，如何将当前项目中的css全部转换为scss，方便以后的开发？整个方案升级用了一周时间，主要过程记录如下：2Steps首先声明所有的CSS规则现在都可以运行在Sass的语法规则上了。2.1将你的.css文件命名为.scss要在你当前的项目中使用Sass，你需要做的第一件事就是将你的.css文件转换为.scss文件。2.2更改所有引用有一些文件需要修改css文件的位置，通常如下：xxx.component.ts文件中@Component装饰器中styleUrls的css文件路径。如果您引用bootstrap或font-awesome，您可以将导入其css文件的文件更改为.scss替代品。在你的vue文件中，可能会引用你的style.css文件，你必须将它们更改为.scss因为我们已经重命名了它。完成以上步骤后（PS：如果使用font-awesome），可能会意外出现如下错误：ERRORin./src/styles.scss(./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js?ref--15-3!./src/styles.scss)模块错误（来自./node_modules/postcss-loader/lib/index.js):(EmittedvalueinsteadofaninstanceofError)CssSyntaxError:/node_modules/font-awesome/scss/_path.scss:9:4:Can'tresolve'../fonts/fontawesome-webfont.woff添加以下行在'in'/src'之前@importfont-awesomescss解决了这个问题。$fa-font-path:"~font-awesome/fonts";PS:可能会出现部分url路径找不到的问题3引入node-sass和sass-loader3.1安装sass依赖包npminstall---save-devsass-loader3.2sass-loader依赖node-sass，所以在build文件夹下webpack.base.conf.js的rules中安装node-sassnpminstall--save-devnode-sass3.3在里面添加配置{test:/\.scss$/,loaders:['style','css','sass']}注：下面的添加视情况而定(css){test:/\.css$/,loader:'style-loader'},{test:/\.css$/,loader:'css-loader'}3.4修改APP.vue中的style标签3.5然后运行Project$npmrundev4常见问题4.1Sass-loader8.0版本错误一般使用sass的项目一般都会遇到build失败的坑。试了很多方法说nodenpm不兼容，所以试了之后发现无效，最后找到的解决方案是这个Reducedversionofsass-loader":"^7.0.3",现在我的版本：sass-loader:“7.0.3”，node-sass：“4.7.2”4.2sass-loader安装失败无法下载“https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-46_binding.node”：这个东西经常因为被墙或内网下载失败，可以从刚才提示的地址手动下载，下载后注册为全局环境变量，两种方式：直接右击我的电脑--》属性——》高级系统设置——》环境变量——》添加setXXX=filepathwindows:setSASS_BINARY_PATH=F:\lishiming\tools\node-sass\win32-x64-46_binding.nodelinux:exportSASS_BINARY_PATH=F:\lishiming\tools\node-sass\win32-x64-46_binding.node检查环境是否合适：echo%SASS_BINARY_PATH%如果打印出你配置的文件地址，说明可以吗4.4node-sass安装失败node-sass安装失败的常见原因npm在安装node-sass依赖时，会从github.com下载.node文件。由于国内网络环境的问题，本次下载时间可能会很长，甚至会导致超时失败。这是使用sass的同学可能会遇到的郁闷问题。解决方法是使用其他源，或者使用工具下载，然后在本地指定安装源。在外网的情况下很容易改源。本文主要讲解内网解决方案：下载.node到本地，根据版本号和系统环境选择下载.node文件，然后安装时指定变量sass_binary_path，如：npminode-sass--sass_binary_path=/Users/aaa/Downloads/darwin-x64-48_binding.node常见问题症状npmWARNError:EPERM:operationnotpermitted,scandir'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules'npmWARN{错误：EPERM：不允许操作，scandir'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules'npm警告堆栈：'错误：EPERM：不允许操作，scandir\'E:\\zkh360\\Zkh360.Web.Admin\\app\\node_modules\\har-validator\\node_modules\'',npmWARNerrno:-4048,npmWARN代码:'EPERM',npmWARN系统调用:'scandir',npmWARN路径:'E:\\zkh360\\Zkh360.Web.Admin\\app\\node_modules\\har-validator\\node_modules'}npm错误！代码ELIFECYCLEnpm错误！错误号1npm错误！node-sass@4.13.1安装后：`nodescripts/build.js`npm错误！退出状态1npmERR!npmERR!在node-sass@3.13.1postinstallscript.npmERR失败！这是亲npm可能不是问题。上面可能有额外的日志输出。4.5chromedriver报错显示>chromedriver@2.46.0install/Users/Jason/Documents/vue-router/node_modules/chromedriver>nodeinstall.jsDownloadinghttp://chromedriver.storage.googleapis.com/2.16/chromedriver_mac32.zipSavingto/var/folders/_1/4khr45254mbfbn7k7fvmbkk80000gn/T/chromedriver/chromedriver_mac32.zipReceiving...ChromeDriver安装失败undefinednpmERR！15.0.0npm错误！argv"/usr/local/Cellar/node/0.12.2_1/bin/node""/usr/local/bin/npm""install"npm错误！节点v5.0.0npm错误！npmv3.4.1npm错误！代码ELIFECYCLEnpm错误！chromedriver@2.16.0安装：`nodeinstall.js`npm错误！退出状态1npmERR!npmERR!在chromedriver@2.16.0安装脚本'nodeinstall.js'.npmERR失败！确保您安装了最新版本的node.js和npm。npm错误！如果你这样做，这很可能是chromedriver包的问题，??npmERR！不是npm本身。下午错误！告诉作者这在你的系统上失败了：npmERR！节点安装.jsnpm错误！您可以通过以下方式获取他们的信息：npmERR！npm所有者lschromedrivernpm错误！上面可能有额外的日志输出。npmERR！请在任何支持请求中包含以下文件：npmERR！/Users/Jason/Documents/vue-router/npm-debug.log内网解决方案下载chromedriver2.46版（对应版本）替换原来的桌面版chromedriver，我的位置是：/usr/local/lib/node_modules/node_modules/macaca-chromedriver/exec注意：名称必须是chromedriver2.46，虽然版本是2.48winows目录C:\Users\abc\AppData\Local\Temp\2.46\chromedriver4。5css转为scss后，loader路径问题可以通过两种方式处理：1、以下情况，资源不会被webpack处理，而是直接copy过来：放在public目录下，即使不被绝对路径引用，即以/开头的路径。2.资源在以下情况下会被webpack处理（URL解析、minify、uglify、base64转换等）：使用JavaScript导入。在template/CSS中是通过相对路径（即以.开头或直接以文件（文件夹）名开头）引用的。URL以~开头，之后的任何内容都将被解析为模块请求。以@开头的URL也会被解析为模块请求（@是webpack中设置的别名）。
