「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组件里引入。

原文地址:https://www.cnblogs.com/wrxblog/p/10467957.html

时间: 2024-10-09 00:22:54

「Vue」vue-cli 3.0集成sass/scss到vue项目的相关文章

技术人员应对「考核」的一些思考

来这个公司实习已经半年多了,在年前经历了一次年终考核,最终对我的工作的评级是 C(及格-符合当前职位的工作),让我不禁思考自己在项目中的一些工作的问题,为什么我是C?是我做的不够好吗?或者说在哪里做的不够好? 从考核流程来看,基本上是 CTO 与 Team Leader 对团队成员的「年终总结与次年工作计划」进行Rank,个人狭义的认为「考核」的主要支持材料就是这个总结了. 他山之石 其他公司是怎么考核的呢?说实话我也不太清楚,刚入行,只能通过搜索了解,在网上了解到有以下几种:发精品博客.发论文

Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题

一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有一个比较有逼格的编辑工具「Vue」个人已经用了很长时间了,拍出来的视频借助强大滤镜真的很好看,显得逼格也高,更重要的是他有我最喜欢的功能就是可以添加视频背景音乐,选择自己喜欢的音乐,然后还可以编辑这段背景音乐,反正我个人觉的这个是我最喜欢用的产品了.但是好用的东西必定有它不好的地方,因为他真的很强大

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

「Vue」起步 - vue-router路由与页面间导航

vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请求"一说的. 前端路由是找到地址匹配的一个组件或者对象将其渲染出来.改变浏览器地址不向服务器发送请求有两种方法, 一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航:二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的URL. vue-router

「更快!更爽!」吹水新闻2.0

这篇文章首发在吹水小镇:http://blog.reetsee.com/archives/388 要在手机或者电脑看到更好的图片或代码欢迎到博文原地址.也欢迎到博文原地址批评指正. 转载请注明: 吹水小镇 | reetsee.com 原文链接地址: http://blog.reetsee.com/archives/388 历时半年的「吹水新闻」重构升级终于完成 吹水新闻2.0的地址是:http://news.reetsee.com: 吹水新闻1.0的地址是:http://reetseenews.

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

JavaScript 引擎「V8」发布 8.0 版本,内存占用量大幅下降

上周,JavaScript 引擎「V8」的开发团队在该项目官方网站上正式宣布推出最新的 8.0 版本.这次更新的重点主要集中在错误修复及性能改善上,正式的版本将在数周后随着谷歌 Chrome 80 稳定版一起发布. V8 是谷歌公司推出的开源高性能 JavaScript 引擎,主要用于提升 Web 浏览器内部 JavaScript 脚本执行的性能.V8 通过 C++ 语言编写,主要用在 Chrome 浏览器以及 Node.js 上,实现了对 ECMAScript 与 WebAssembly 的支

0 到 1 掌握:Vue 核心之数据双向绑定

实现数据的双向绑定: 1.实现一个监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者: 2.实现一个订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理: 3.实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图: 4.实现一个解析器 Compile,可以解析每个节点的相关指令,对模板数据和订阅器进行初始化. Reference: 0 到 1 掌握:Vue 核心之数据双向绑定 http

「01」机器学习,到底在学些什么?

阅读 0 编辑文章 大家好,欢迎来到久违的机器学习系列,这是「美团」算法工程师带你入门机器学习 专栏的第一篇文章,不会太长,一半聊想法,一半聊干货.熟悉我的朋友可能知道,我以前的文章比较随意,涉及的内容极广,包括但不限于Python/Java/C/C++,网络编程,Hadoop等,但主要核心还是机器学习算法和数据科学相关的主题,这一点没变过. 最近认真总结和思考了之前的博客内容,决定将自己从入门到现在一路走来的学习经验和理解整理一番,帮助更多后来的小伙伴更好的入门,所以就有了这个系列.以前的知乎