码迷,mamicode.com
首页 > 其他好文 > 详细

vue 项目 使用sass以及注意事项

时间:2018-07-27 13:16:15      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:index   无法   webpack   命令   通过   二进制包   安装   scss   镜像   

vue 项目 使用sass以及注意事项

1,安装依赖:

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

注:

通常使用npm安装会出现以下报错,安装失败。(网路问题)

技术分享图片

可以通过淘宝的npm镜像安装node-sass,解决以上问题。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装淘宝镜像)

$ cnpm install node-sass  --save (使用淘宝镜像安装node-sass)

注:安装淘宝镜像后,仍无法安装node-sass的情况,执行下列命令

$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

说明:

 
--registry=https://registry.npm.taobao.org 淘宝npm包镜像
 
--disturl=https://npm.taobao.org/dist 淘宝node源码镜像,一些二进制包编译时用
 
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass镜像
 
2,进入webpack.base.config.js 配置scss:
如下图:
技术分享图片

 

如上添加配置scss:

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

3,如何引用外部的scss文件。

技术分享图片

 

如有不足之处,请多多指教!!!github项目地址:https://github.com/whiskyma

vue 项目 使用sass以及注意事项

标签:index   无法   webpack   命令   通过   二进制包   安装   scss   镜像   

原文地址:https://www.cnblogs.com/maqingyuan/p/9376853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!