vue项目中使用sass,vue 引入scss
本文主要介绍了vue项目中sass的配置和外部scss文件的引入，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
配置sass和导入外部scss文件配置sass导入外部scss文件如果错误如下图所示，请记住此时需要重新启动项目。Vue导入Sass文件的问题来了。为什么？
配置sass及引入外部scss文件
配置sass
安装对应依赖node模块
npm安装节点-sass - save-dev
npm安装sass-loader - save-dev
引入外部scss文件
在main.js中引入需要的scss文件
如果显示错误为如下图所示
打开webpack.base.config.js，删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的，只要你装node-sass 和sass-loader，不需要自己添加配置。
记住此时需要重启项目 npm run dev
踩过的坑 Vue引入Sass文件
问题：我在用vue cli 3.0开发自己网页的过程中，想把CSS样式分离出来，因为Sass的嵌套写法很清晰，所以我个人很喜欢。
然而，当CSS样式被单独引入文件时，只有第一层CSS样式被发现是有效的。
问题来了，为什么呢？
半铸钢钢性铸铁(Cast Semi-Steel)。部分{
/*只有这一层有效*/
宽度：500px
高度：500px
背景色：# 409EFF。标题{
宽度：500px
高度：100px
背景色：#67C23A
}。主要{
宽度：500px
高度：300px
背景色：# E6A23C
}。页脚{
宽度：500px
高度：100px
背景色：# F56C6C
}
}
首先，我尝试过直接在vue文件中写Sass style，成功了，但是为什么分离出来就不行了？
然后再次运行该命令。
npm安装-保存-开发节点-sass sass-加载器样式-加载器
eCLI 3.0以后没有config.js、build之类的文件或文件夹，不需要配置就可以直接使用。
命令运行后，仍然不起作用。
于是百度开始，我隐约觉得问题是在介绍的时候出现的，而不是分析的时候。
百度@导入网址(’)的区别。/xxx.sass )和@ @import”。/xxx.sass "
得到官方答案
Sass支持原生CSS@import。sass会尝试查找对应的Sass文件并导入，但在以下三种情况下会生成原生CSS@import:
导入文件的名称以结尾。css，并且导入文件的名称是一个URL地址(比如http://www.sass.hk/css/css.css)，所以可以使用Google Font API提供的相应服务；导入文件的名称是CSS的url()值。也就是说你不能用sass的@import直接导入一个原css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法与css完全兼容，所以您可以将原始css文件重命名为。scss后缀，直接导入。
所以Sass文档一开始解析不正确。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。