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

3、配置loader加载器
在 build/webpack.base.conf.js 文件里添加如下语句
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

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

被折叠的 条评论
为什么被折叠?



