在vue-cli建的vue项目中使用sass
前面已使用vue-cli新建了一个vue项目,参考 使用命令行创建一个vue项目的全部命令及结果
首先看下新建项目的页面和代码,有部分修改,可忽视,如下图:

然后我们在页面添加sass的代码:

修改完保存后立即就报错了:

在使用scss之前,我们首先需要安装相关的插件: 这里参考的是:链接( vue 项目 使用sass )
$ npm install node-sass --save-dev > node-sass@4.9.0 install F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/install.js Cached binary found at D:\nodejs\node_cache\node-sass\4.9.0\win32-x64-57_binding.node > node-sass@4.9.0 postinstall F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/build.js Binary found at F:\05 poverty alleviation project\poverty\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + node-sass@4.9.0
added 73 packages from 83 contributors and audited 33411 packages in 40.38s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details $ npm install sass-loader --save-dev
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + sass-loader@7.0.3
added 9 packages from 17 contributors and audited 33431 packages in 15.084s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
安装完重新启动项目,如下图,我们看到页面是可以正常显示了,用scss写的样式也起了作用哦 :)

这里不同于参考链接的是,不需要配置参考文说到的webpack.base.config.js,可是也能正常使用了。
而安装上面的插件也是一次性就安装成功的,没有出现别的问题。
谁知道原因的可以留言哦,新手不是很懂这些配置文件。
在vue-cli建的vue项目中使用sass的更多相关文章
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- vue打包发布在spingboot项目中 vue-router路由的处理
(原) 以下例子springboot后端地址为:localhost:7080/pingandai vue前端地址为:locahost:8080/pingandai/ 1.如果路由模式设置的是histo ...
- 《论vue在前后端分离项目中的实践之年终总结》
我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- 2018.09.24 bzoj1016: [JSOI2008]最小生成树计数(并查集+搜索)
传送门 正解是并查集+矩阵树定理. 但由于数据范围小搜索也可以过. 我们需要知道最小生成树的两个性质: 不同的最小生成树中,每种权值的边出现的个数是确定的 不同的生成树中,某一种权值的边连接完成后,形 ...
- [MySQL]变更数据库字符集
my.cnf [mysqld] character-set-server=utf8 [mysqld_safe] default-character-set=utf8 -- 创建数据库时,设置数据库的编 ...
- Cache Algorithms
1. 平均内存引用时间 T = average memory reference time m = miss ratio = 1 - (hit ratio) Tm = time to make a m ...
- 2015 - 4- 21 iOS开发越狱环境的搭建1
2015 - 4- 20 1. 越狱环境的搭建 http://www.iduuke.com/2030.html http://www.cnblogs.com/xiongwj0910/archi ...
- (最小生成树) 畅通工程再续 -- HDU --1875
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1875 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- Berlin 10.1 支持 iPhone 4 (iOS v7.x)
http://www.cnblogs.com/onechen/p/5559017.html 原本在 Seattle 版本时,还能支持 iPhone 3GS (iOS v6.x), iPhone 4 ( ...
- Android-Java-IO流概述
IO:I:Input输入 O:Output输出 IO流: IO:用于处理设备上数据的一种技术,处理设备上数据包括(Input / Output) ,设备指的是:内存,硬盘,U盘,打印机,等等..... ...
- memcached分布式缓存系统
在数据驱动的Web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵活.此时 ...
- boot分区剩余空间不足
Linux boot分区用于存放内核文件以及Linux一些启动配置文件,一般情况下分区大小为500M足够使用,如果出现空间不足的问题可以使用以下方法来解决. 查看已经安装的内核 dpkg --ge ...
- TSQL--按某字段列分组,在将各组中某列合并成一行
鉴于群里很多同事在问这个问题,我简单写个Demo,希望对初学者有帮助! 无真相,无解说,不解释,直接上Code! --========================================= ...