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以及注意事项的更多相关文章

  1. Vue项目引入sass

    最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue ...

  2. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  3. 【前端vue开发】vue项目使用sass less扩展语言所要安装的依赖

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 ...

  4. Vue项目中sass语法该怎么用?

    最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...

  5. vue 项目 使用sass,node-sass 安装方法及cnpm下如何安装node sass

    内容为转载,方便用时查阅,原文地址: https://www.cnblogs.com/crazycode2/p/6535105.html 1,使用save会在package.json中自动添加. 1 ...

  6. vue 项目 使用sass

    1,使用save会在package.json中自动添加. npm install node-sass --save-dev npm install sass-loader --save-dev 注: ...

  7. vue项目安装sass步骤等遇到的问题

    1.安装sass依赖包 npm install --save-dev sass-loader 注释(可能会出现问题:sass-loader版本过高导致,可以将其package.json中的版本改为7. ...

  8. vue 项目安装sass的依赖包

    安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node- ...

  9. vue 项目配置sass

    1.运行npm install node-sass --save-dev npm install sass-loader --save-dev 2.打开build文件夹下面的webpack.base. ...

随机推荐

  1. Java基础加强-反射机制

    反射的基石 -> Class 类(字节码)/*只要是在源程序中出现的类型,都要各自的Class实例对象,例如:int,int[],void*/如何得到各个字节码对应的实例对象(Class类型) ...

  2. Django drf:幂等性

    一.什么叫做幂等性 用户对于同一操作发起的一次请求或者多次请求的结果是一致的,不会因为多次点击而产生了副作用.举个最简单的例子,那就是支付,用户购买商品使用约支付,支付扣款成功,但是返回结果的时候网络 ...

  3. 库克谈新iPhone不支持5G的理由,学习一下如何高手怎么应答

    库克谈新iPhone不支持5G的理由 投递人 itwriter 发布于 2019-09-12 08:41 评论(14) 有1623人阅读 原文链接 [收藏] « » 9 月 12 日消息,苹果公司 C ...

  4. python学习之模块(pip),列表生成式,模块操作mysql,excel

    python基础 生成式 列表生成式 格式 [表达式 for 表达式 in 迭代对象 (可加判断)] 原: res1 = [] for i in range(1,5): res1.append(i) ...

  5. Python+request+ smtplib 测试结果html报告邮件发送(下)《六》

    目录结构如下: 1.cfg.ini的配置信息写法如下: [email] ;--------------------------使用腾讯企业邮箱作为发件人的操作如下------------------- ...

  6. java判断文件是否为图片

    /** * 判断文件是否为图片<br> * <br> * @param pInput 文件名<br> * @param pImgeFlag 判断具体文件类型< ...

  7. Junit加载Spring容器作单元测试

    阅读目录 > 基本的搭建 > 常见的用法 如果我们需要对我们的Service方法作单元测试,恰好又是用Spring作为IOC容器的,我们可以这么配置Junit加载Spring容器,方便做单 ...

  8. webpack安装,常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  9. 下载apache旗下Web服务器软件

    apache官方网站:http://www.apache.org/ 1.百度搜索apache找到apache官网 2.进入apache官网打开旗下web服务器软件列表 3.进入apache旗下web服 ...

  10. Codeforces Round #551 (Div. 2) E. Serval and Snake (交互题)

    人生第一次交互题ac! 其实比较水 容易发现如果查询的矩阵里面包含一个端点,得到的值是奇数:否则是偶数. 所以只要花2*n次查询每一行和每一列,找出其中查询答案为奇数的行和列,就表示这一行有一个端点. ...