Vue项目引入sass
最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,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的更多相关文章
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- vue 项目 使用sass以及注意事项
vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...
- vue项目安装sass/scss
vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- vue项目引入element
前提工作-安装并配置好以下环境: 1.安装node 2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...
- 【vue】vue项目引入 Element-UI
根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
- vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...
- vue项目 引入js文件
例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...
随机推荐
- hdu3555 Bomb(数位dp)
题目传送门 Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total ...
- 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 ...
- Sql Server Management Studio 18 打开闪退问题
解决方案 找到MSSMS安装位置,例如我是安装到了D:\Program Files (x86)\Microsoft SQL Server Management Studio 18 将D:\Progra ...
- Feign基础教程
https://blog.csdn.net/u010862794/article/details/73649616 简介 Feign使得 Java HTTP 客户端编写更方便.Feign 灵感来源于R ...
- 深度学习之Tensorflow 工程化项目实战 配套资源
https://www.aianaconda.com/index/CodeProject
- jquery-ui拖拽对齐线位置不对的操作
1,在draggable的drag中直接获取$(this).offset()来给对齐线设置top和left: 2,在draggable的drag中直接获取event的clientX去和event的of ...
- python用户名密码限定次数登录
""" 1. 用户输入帐号密码进行登陆 2. 用户信息保存在文件内 3. 用户密码输入错误三次后锁定用户"""" test.txt ...
- 【JZOJ1913】【BZOJ2124】等差子序列
description 给一个1到N的排列{Ai},询问是否存在1<=p1<p2<p3<p4<p5<-<pLen<=N (Len>=3), 使得A ...
- 为什么不能在shell脚本中执行source /etc/profile或者source ~/.bashrc问题?
执行脚本时,其中的命令是在一个子shell中执行的.子shell继承了父shell的环境变量,但无法修改他们,或者说所做的修改仅对子shell有效.
- Random Point in Triangle
题目链接 题意:多组输入三角形各个顶点坐标p1,p2,p3,在三角形中任取一点p,计算 期望E=max(S(p,p1,p2),max(S(p,p1,p3),S(p,p2,p3))); 思路:用随机数找 ...