「Vue」vue-cli 3.0集成sass/scss到vue项目
vue-cli 3提供了两种方式集成sass/scss:
创建项目是选择预处理器sass
手动安装sass-loader
创建项目选择预处理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
移动上下键选择“Manually select features”:表示手动选择创建项目的特性。
显示如下:
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-processors。
显示如下:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus
选择第一个SCSS/SASS作为我们的CSS预处理器。
完成后项目会帮我们安装sass-loader node-sass。
手动安装
如果在创建项目没有选择CSS 预处理器,我们也可以手动安装sass-loader node-sass来集成scss。
npm install -D sass-loader node-sass
使用
至此我们只需要在style指定lang为scss即可:
<style lang="scss">
$color = red;
</style>
vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。
vue cli是基于webpack构建项目,如果想对sass-loader传递一些配置项,可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js,手动创建即可。如下:
// vue.config.js
const fs = require('fs')
module.exports = {
css: {
loaderOptions: {
sass: {
data: fs.readFileSync('src/variables.scss', 'utf-8')
}
}
}
}
这个文件variables.scss也是可以通过import在.vue组件里引入。
「Vue」vue-cli 3.0集成sass/scss到vue项目的更多相关文章
- Vue-cli 3.0 使用Sass Scss Less预处理器
项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...
- 【LOJ】#3101. 「JSOI2019」精准预测
LOJ#3101. 「JSOI2019」精准预测 设0是生,1是死,按2-sat连边那么第一种情况是\((t,x,1) \rightarrow (t + 1,y,1)\),\((t + 1,y, 0) ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题
一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有 ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
随机推荐
- 一个小时搭建一个全栈 Web 应用框架
把想法变为现实的能力是空想家与实干家的区别.不管你是在一家跨国公司工作,还是正在为自己的创业公司而努力,那些有能力将创意转化为真正产品的人,都具有宝贵的技能并拥有明显的实力.如果你能在不到一个小时的时 ...
- CSS3实现图片渐入效果
很多网站都有那种图片渐入的效果,如:http://www.mi.com/minote/,这种效果用css3和一些js实现起来特别简单. 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果. 下 ...
- 希尔排序(java实现)
上篇blog中介绍的直接插入排序,希尔排序就是对直接插入排序的一个优化.比如有这么一种情况:对一个无序数组进行从小到大的排序,但是数组的最后一个位置的数是最小的,我们要把它挪到第一个位置,其他位置的都 ...
- c# apache服务器请求得到数据(初级)
1.代码: string data = new WebClient().DownloadString("http://localhost:81/123.txt");
- Spring 依赖的Jar包简介
Spring 依赖的Jar包简介 Spring的依赖关系 依赖关系分组 JAR文件 说 明 ant ant.jar, ant-junit.jar, ant-launcher.jar Spring采用A ...
- 2014-2015 ACM-ICPC, NEERC, Eastern Subregional Contest Problem H. Pair: normal and paranormal
题目链接:http://codeforces.com/group/aUVPeyEnI2/contest/229669 时间限制:1s 空间限制:64MB 题目大意:给定一个长度为2n,由n个大写字母和 ...
- C语言的调查
1.你对自己的未来有什么规划?做了哪些准备?从事跟本专业相关的工作.认真学习好书本的知识,并能很好的运用它. 2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么?学习可以让自己懂得更多,完善 ...
- J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别(转载)
转载地址:http://blog.csdn.net/alspwx/article/details/20799017 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterpri ...
- zabbix简介
(一)监控系统 初探 前言: 对于监控系统而言,首先必须搞清楚需要监控什么? (1)硬件设备和软件设备:服务器,路由器,交换机,I/O存储系统,操作系统,网络,各种应用程序 (2)各种指标:数据库宕机 ...
- 新浪 ip 地址库
API地址:http://int.dpool.sina.com.cn/iplookup/iplookup.php 帮助 1 2 3 4 5 6 7 8 function get_location($i ...