vue scss 安装
1、开始在vue项目中使用sass,在命令行输入一下命令进行安装(使用git命令行要用shift+insert 进行粘贴否则粘贴不上)
cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装sass-loader
cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的! 2. 这个时候你打开build文件夹下面的webpack.base.config.js
把里面的module改成这样的
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //添加下面这段代码
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
3.在需要用到sass的地方添加lang=scss
<style lang="scss" scoped="" type="text/css">
//你的sass语言 $primary-color: #333;
body {
color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
}
</style>
vue scss 安装的更多相关文章
- vue项目安装sass/scss
vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- Vue.js安装及环境搭建
Vue.js环境搭建-Windows版 步骤一:安装node.js 在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者 ...
- vue的安装配置与项目创建
1,安装vue必须先安装node.js. --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...
- 10.2 Vue 环境安装
Vue 环境安装 环境准备 nodejs 下载安装 https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...
- VUE项目安装
连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html 刚刚开始学习Vue.js.今天分享一下我的Vue项目安装过程. 我是windows系统 ...
- node服务的安装以及vue的安装
相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...
- vue的安装
第一步:环境的搭建 : vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言(https://nodejs.org/zh-cn/down ...
- 【vue】vue.js安装教程/vue项目搭建
前提:已安装nodejs——npm (备注教程 “物理安装” ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...
随机推荐
- Javascript控制回车键进行表单(form)提交(转)
一.采用钩子事件去捕获 键盘事件有3个: keydown,keypress,keyup分别是按下,按着没上抬,上抬键盘 . $(document).keyup(function(event){ if( ...
- 优化实例- not use hash to avoid temp space issue
在展开下面的original sql 和 execution plan之前,要知道这个SQL的问题就在于占用大量的TEMP space orignal SQL SELECT roster.IC_N A ...
- iOS中UITextView的操作技巧
刚才看了一篇textView实现placeholder的文章,有兴趣的同学们能够看下:__biz=MzA3NzM0NzkxMQ==&mid=211846438&idx=1&sn ...
- 查看编译器的默认include 路径
echo | gcc -v -x c++ -E - echo | g++ -v -x c++ -E - `gcc -print-prog-name=cc1plus` -v `g++ -print-pr ...
- JArray获取元素值
MXS&Vincene ─╄OvЁ &0000003 ─╄OvЁ MXS&Vincene MXS&Vincene ─╄OvЁ:今天很残酷,明天更残酷,后天很美好 ...
- 【Cocos2dx】Windows平台下Cocos2dx 2.x的下载、安装、配置,打造自己的Helloworld
Cocos2dx就不废话介绍了, 很火的游戏引擎.关键是它开源.能够免费下载.学习.开发.不用搞这么多激活的东西. 以下以Cocos2dx 2.x为例说明这个平台的一些基本东西.尽管如今Cocos2d ...
- luogu2770 航空路线问题 网络流
题目大意: 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线.(1)从最西端城市出发,单向从西向东途经若干城市到达最东端城市,然 ...
- C++重载运算符简单总结
当运算符作用于类类型的运算对象时,可以通过运算符重载重新定义该运算符的含义.明智的使用运算符重载能令我们的程序更易于编写和阅读. 一.基本概念 什么是运算符重载?重载的运算符是具有特殊名字的函数:它们 ...
- P4135 作诗——分块
题目:https://www.luogu.org/problemnew/show/P4135 分块大法: 块之间记录答案,每一块记录次数前缀和: 注意每次把桶中需要用到位置赋值就好了: 为什么加了特判 ...
- Java插入中文到数据库中文变成问号解决
转自:https://blog.csdn.net/hellosweet1/article/details/81673152 之所以会出现乱码,就是编码方式不一致导致的 我们应该首先确定 ...