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

参考文章:Vue项目使用sass

(1)首先是先用vue-cli构建一个新的vue项目

  ① 安装node

  ② node安装好后安装脚手架:npm install -g vue-cli

  ③ 构建vue项目:vue init webpack vue_exercise

  ④ 进入项目根目录,把项目运行起来:npm run dev

(2)安装sass

  ① npm install node-sass --save-dev

  ② npm install sass-loader --save-dev

  如果网络不好,会导致安装失败,这时需要从淘宝镜像安装node-sass,

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

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

(3)配置sass编译

  打开根目录下build/webpack.base.config.js,在modules对象的rules数组中加入一个对象,如下:

  

module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader',
}
]
}

  

  看了下大佬的说法,loader: 'style-loader!css-loader!postcss-loader!sass-loader'主要针对vue1.0版本可用,在vue2.0中测试了下也是可以的,在vue 2.0 的sass配置也可以如下这样:

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

  保存一下,然后去在组件中试了下sass语法已经可以正常编译了,nice,学了个好玩的东西...

Vue项目引入sass的更多相关文章

  1. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

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

    vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...

  3. vue项目安装sass/scss

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

  4. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  5. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  6. 【vue】vue项目引入 Element-UI

    根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...

  7. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  8. vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

  9. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

随机推荐

  1. hdu3555 Bomb(数位dp)

    题目传送门 Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total ...

  2. string(81) "SQLSTATE[HY000]: General error: 1364 Field 'content' doesn't have a default value"

    mysql版本是5.7.26,在插入数据时报错: string(81) "SQLSTATE[HY000]: General error: 1364 Field 'content' doesn ...

  3. Sql Server Management Studio 18 打开闪退问题

    解决方案 找到MSSMS安装位置,例如我是安装到了D:\Program Files (x86)\Microsoft SQL Server Management Studio 18 将D:\Progra ...

  4. Feign基础教程

    https://blog.csdn.net/u010862794/article/details/73649616 简介 Feign使得 Java HTTP 客户端编写更方便.Feign 灵感来源于R ...

  5. 深度学习之Tensorflow 工程化项目实战 配套资源

    https://www.aianaconda.com/index/CodeProject

  6. jquery-ui拖拽对齐线位置不对的操作

    1,在draggable的drag中直接获取$(this).offset()来给对齐线设置top和left: 2,在draggable的drag中直接获取event的clientX去和event的of ...

  7. python用户名密码限定次数登录

    """ 1. 用户输入帐号密码进行登陆 2. 用户信息保存在文件内 3. 用户密码输入错误三次后锁定用户"""" test.txt ...

  8. 【JZOJ1913】【BZOJ2124】等差子序列

    description 给一个1到N的排列{Ai},询问是否存在1<=p1<p2<p3<p4<p5<-<pLen<=N (Len>=3), 使得A ...

  9. 为什么不能在shell脚本中执行source /etc/profile或者source ~/.bashrc问题?

    执行脚本时,其中的命令是在一个子shell中执行的.子shell继承了父shell的环境变量,但无法修改他们,或者说所做的修改仅对子shell有效.

  10. Random Point in Triangle

    题目链接 题意:多组输入三角形各个顶点坐标p1,p2,p3,在三角形中任取一点p,计算 期望E=max(S(p,p1,p2),max(S(p,p1,p3),S(p,p2,p3))); 思路:用随机数找 ...