Vue cli3 中全局引入scss文件
写在前面
近期把之前写的一个Vue老项目进行了一番重构，发现其中有许多重复使用的css样式代码，决定把重复使用的样式代码提取到公共的scss文件中，并全局使用，本来以为是一个比较简单的工作，但是在操作的过程中，还是碰到了不少问题。这里简单记录下，并分享给有需要的人，希望对大家有所帮助。
方法 1
步骤 1：根目录新建
vue.config.js文件步骤 2：将下述代码添加到
vue.config.js文件中
module.exports = {css: {loaderOptions: {scss: {prependData: `@import "./public/my-global.scss";`,},},},
};也可以直接在 APP.vue 中通过 下方代码引入，但是这时只能访问定义好的样式，不能访问 scss 中定义的变量，通过上述方法引入才能做到真正的代码引入。
@import "../public/my-global.scss";这里需要注意一下：引入 css 文件需要通过 @import url ( path ) 的方式引入， 引入 scss 文件则不需要 url ( ) .
方法 2
- 下面这段代码是一段过时的代码，如果方法 1 不生效的话，可以试试如下代码：
css: {loaderOptions: {scss: {additionalData: `@import "./public/my-global.scss";`}}}本文同步发布于个人 G 众号：【前端知识营地】点击下方链接关注我，获取更多优质有趣的内容！
Vue cli3 中全局引入scss文件相关推荐
- Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
- Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
- Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
- 在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
- Vite+ts全局引入scss与实际使用
家人们,之前写的有问题,误导了快200多人,这个东西如果全局引入了,并且还要再script里面再引入,只能是创建一份scss的副本,就是全局引入的是一份,script里面引入另一份,这样就不会冲突了 ...
- Vue项目中如何引入Toast插件
Vue项目中如何引入Toast插件 安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...
- 新窗口打开vue项目中的静态pdf文件，并做权限控制
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 "项目地址/operate.pdf "此地址,会展示pdf文件. 描述:点击系统内的一个按钮会打开新窗口展示系统 ...
- js html引入外部css文件,js中如何引入css文件？
js中如何引入css文件?下面本篇文章给大家介绍一下使用JS引入css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用document.write方式输出引入cs ...
- vue cli3及4版本的全局引入scss
虽然是个简单的功能,但是发现按照很多网上的方法去操作并不能实现方法,所以还是写一下好了 需要借助 sass-resources-loader工具 npm install sass-resources- ...
最新文章
- HDLBits 系列（5）让三元条件运算符（？：）在你的设计中发挥作用
- Mac搭建本地svn服务器，并用Cornerstone连接服务器
- vue.js组件学习（上）
- mac或linux下JDBC的简单实现，图文介绍（附测试源码）
- 【转】Unity中的单位长度与像素之间的关系
- Nginx源码分析-启动初始化过程（一）
- 在shell中如何判断一个变量是否为空
- Laravel学习笔记四-数据库迁移和模型文件
- 7台不同配置M1 MacBook Pro真实测试
- Vue简易购物车实例
- OpenCore黑苹果引导配置说明-基于OpenCore-0.7.1-07-06正式版
- 动量梯度下降(Momentum、指数加权平均)、逐参数适应学习率方法(Adagrad、RMSprop、Adam)、学习率退火、归一化/标准化
- 基于微信小程序的图书馆管理系统.rar(论文+源码)
- 【5G NR】工作频段和信道安排
- WPS翻译公式之谷歌翻译公式
- IP-MAC绑定到底有多重要？（白目的见解）
- 通过检查table_locks_waited和table_locks_immediate状态变量来分析系统上的表锁定争夺
- Mac安装Node-sass报错 warning: loop variable ‘numerator‘ creates a copy from type ‘const std::string
- C#中操作Word（9）—— 向Word中插入图表的三种方法（二）
- MAC如何安装pfx
热门文章