博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在vue项目中全局引入一个 .scss文件
阅读量:6368 次
发布时间:2019-06-23

本文共 686 字,大约阅读时间需要 2 分钟。

需求:在用vue-cli开发项目的时候,有这样的一个需求:我有个.scss的公共文件需要在项目的每个 .vue 文件使用,而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-loader 。

(1)第一步:

首先要下载 : sass-resources-loader

npm install sass-resources-loader --save-dev

(2)第二步,在项目里找到build/utils文件。并找到下图位置

clipboard.png

然后在scss: generateLoaders('sass')后面加上以下代码:

.concat(      {        loader: 'sass-resources-loader',        options: {          // 需要全局引入的sass文件,这里引入了的scss文件,在所有的.vue文件都可以用到这份css样式,          // 下面的resources接受一个数组,可以添加多个scss文件          resources: [path.resolve(__dirname, '../src/assets/sass/index.scss')]        }      }    )

clipboard.png

(3)此时文件已经配置成功,需要重启npm run dev服务才可以看到效果.

(4) 如果要导入多个文件,有两种办法:

1、在上面代码的resources数组选项增加多一个scss文件路径。2、在上面的index.scss文件里用@import引入其他scss文件。

转载地址:http://bsrma.baihongyu.com/

你可能感兴趣的文章
Laravel优秀扩展包整理
查看>>
日志分析之识别真假蜘蛛与处理办法
查看>>
太多脚本将会毁掉持续交付
查看>>
一地鸡毛 OR 绝地反击,2019年区块链发展指南
查看>>
卢森堡大学发布RepuCoin系统,可破解区块链51%攻击
查看>>
国内云计算厂商众生相:四大阵营十几家企业生存盘点
查看>>
细说Unicode(一) Unicode初认识
查看>>
Node.js有了新的管理者
查看>>
Java 20年:历史与未来
查看>>
彻底理解Javascript中的原型链与继承
查看>>
腾讯最大规模裁撤中层干部,让贤年轻人
查看>>
gRPC-Web发布,REST又要被干掉了?
查看>>
如何:强化 TCP/IP 堆栈安全
查看>>
Spring3 MVC中使用Swagger生成API文档
查看>>
FastCGI PHP on Windows Server 2003
查看>>
LimeSDR Getting Started Quickly | LimeSDR上手指南
查看>>
JSP标签JSTL的使用(1)--表达式操作
查看>>
SAP顾问的人脉比技术更为重要
查看>>
FI/CO PA考试试卷
查看>>
汽车介质应用非常严苛?没关系,新技术带来的高精度传感器十分适应!
查看>>