今天早上更新了vscode最新版本
更新后发现在.vue文件中的template文件中
输入html标签后按tab时无法补全标签
将文件类别识别为html格式，依然无法补全
在排除了输入法的问题后
在网上找到emmet默认配置问题
大家提到新版本emmet并不默认支持vue文件
打开文件，首选项，设置
搜索&syntaxProfiles
然后在右侧添加
&emmet.syntaxProfiles&: {
& &vue-html&: &html&,
& &vue&: &html&
将其手动关联设置
但是依旧无法成功
找到第二种设置关于emmet的配置选项
&emmet.showAbbreviationSuggestions&: true,
&emmet.showExpandedAbbreviation&: &always&,
&emmet.includeLanguages&: {
&vue-html&: &html&,
&vue&: &html&
}设置后，补全功能生效
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1011次
排名：千里之外
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'详解如何在vue中使用sass
作者：一步一步往上爬
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
创建一个基于 webpack 模板的新项目
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
$ cd my-project
$ npm install
为了使用sass，我们需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
修改style标签
打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下
&style lang="sass"&
然后运行项目
npm run dev
终端显示错误，如下：
ERROR Failed to compile with 1 errors
error in ./src/components/Hello.vue
Module build failed:
Invalid CSS after "h1, h2 {": expected "}", was "{"
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)
错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang="sass"改成lang="scss"就行了。
引用sass/scss 文件
@import "./common/scss/mixin";
千万别忘了分号
否则会报错类似的错误
Module build failed:
Media query expression must begin with '('
in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256
好了，在vue项目中使用sass就这么简单
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Auto Close Tag 自动补全html标签
Auto Rename Tag 同步更改html尾标签
ESLint ESlint语法提示
settings.json 文件
&eslint.nodePath&: &E:/WebStorm&, // 应用路径
&eslint.validate&: [
&javascript&,
&javascriptreact&,
&vue& // 添加vue文件支持
File Peek 文件路径跳转
settings.json 文件
&file_peek.activeLanguages&: [
&typescript&,
&javascript&,
&vue& // 添加vue支持
&file_peek.searchFileExtensions&: [
&.vue& // 添加vue支持
HTML CSS Support css语法提示
HTML Snippets html标签提示
JavaScript (ES6) snippets ES6语法快捷键支持
language-stylus stylus语法提示
Stylus stylus CSS语法提示--&主要支持vue文件下stylus
Path Autocomplete 文件自动路径提示
VS Color Picker color: #fff 自动提示
Vue 2 Snippets vue快捷键提示
本文已收录于以下专栏：
相关文章推荐
距离上次的文章已经过去了两个多月了。这期间我又搜罗了一波比较实用的插件推荐；
Vue自从发布以来就一直受到前端开发人员的热爱，而除了一些本身优秀的特征之外，还有就是丰富的插件和工具的支持和更新。虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发，但是越来越多优...
此扩展将Vue 2代码片段和语法突出显示添加到Visual Studio代码中。
这个插件基于最新的Vue官方语法高亮文件添加了语法高亮，并且依据Vue 2的API添加了代码片段。
DDoS攻击类型
     DDoS 的类型的分布，64% 是属于容量耗尽型攻击，18% 是属于状态耗尽型攻击，应用层攻击也大约是 18%。AWS 基于标准的开箱即用安全工具，能够帮助你实现...
API调用次数限制实现
参考资料：
    1. /p/?hmsr=toutiao.io&utm_medium=tout...
1.主题  sublime 
2.图标主题: set-ui
3.提高编辑效率 vim
4.预览页面  view in browser
5.css csscomb
View In B...
飞天平台安全管理
　　钟馗(zhongkui)是飞天平台内核中负责安全管理的模块，它提供了以用户为单位的身份认证和授权以及对集群数据资源和服务进行的访问控制。
       用户的身份认证...
Jenkins+Docker搭建持续集成测试环境
本文将重点讨论在Jenkins管理的持续集成以及测试的环境中，我们如何通过引入Docker来优化资源的配置，提高整个环境的性能以及稳...
构建高并发高可用的电商平台架构大纲
      参考：http://blog.csdn.net/yangbutao/article/details/
Web攻击手段之XSS攻击,CRSF, SQL注入攻击
      1.  XSS攻击
       XSS攻击的全称是跨站脚本攻击，指的是攻击者在网页中嵌入恶意脚本程序，当用户打开该网页...
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)webpack单独构建scss文件与.vue组件里构建scss的一个坑
时间： 13:52:00
&&&& 阅读：592
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&　　在入口main.js里构建scss是通过引入模块的方式
import ‘./assets/_reset.scss‘;
import ‘./assets/_flex.scss‘;
import ‘./assets/_functions.scss‘;
　　在.vue组件里是单独构建的
&style lang="scss" scoped&
width: rem(300px);
#product, .gallery, .detail {
width: rem(750px);
　　里面的rem()是_functions.scss里定义的一个scss函数
@function rem($px){
@return ($px / 40px) * 1
　　然而这个rem()函数一直用不了，找问题找了很长时间，当然最后还是解决了。
　　webpack在对main.js里引入的scss编译时，分别把每一个scss文件转成了css文件放在了html文档的head里面，这里有3个scss就直接转成了3个css文件
放在了head里（在webpack.config.js只引入scss的加载器，而不引入处理css插件的情况下）。因此，_functions.scss里的函数就没用了，scss的函数只有在一个
完整的大scss里才能对后面需要用到函数的地方起作用，而我们.vue里的scss和_functions.scss不在一个文件里，因此scss函数失效了。
　　那有什么办法呢？
　　一个办法就是把所有scss移出.vue，与所有scss文件放一起，通过scss的@import方式组成一个大scss文件，最后编译成一个css文件；
　　另一个办法是将函数scss单独通过@import的方式引入需要该函数的.vue的文件里。标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！}