Vue配置安装Sass

eobeans

于 2021-06-06 15:31:26 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

文章标签： css sass

本文链接：https://blog.youkuaiyun.com/kramer_light/article/details/117628346

本文介绍了如何在项目中安装和配置Webpack以支持Sass文件的编译，包括使用`npm`安装`sass`、`node-sass`和`sass-loader`。在安装过程中，可能会遇到从GitHub仓库下载`node-sass`失败的问题，解决方案是通过设置淘宝镜像源来安装。此外，当遇到版本不匹配问题时，可以指定`node-sass`的版本进行安装。最后，文章演示了在`webpack.base.conf.js`中配置loader以处理.scss文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先要安装sass、node-sass、sass-loader

npm install --save-dev sass-loader
npm install --save-dev sass-loader
npm install --save-dev node-sass

2、可能遇到的坑
① 安装node-sass时github仓库下载失败
在这里插入图片描述
解决方法：使用淘宝镜像，在gitbass使用如下命令：

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install --save-dev node-sass

在这里插入图片描述
② 安装node-sass时，版本和node不匹配

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install --save-dev node-sass@4.14.1

参考https://github.com/sass/node-sass

3、配置loader加载器
在 build/webpack.base.conf.js 文件里添加如下语句

	  {
	    test: /\.scss$/,
	    loaders: ['style', 'css', 'sass']
	  }

在这里插入图片描述

如此，配置完成。