Vue 中使用@import导入外部样式常见问题

最新推荐文章于 2024-01-24 17:59:25 发布
最新推荐文章于 2024-01-24 17:59:25 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61243175/article/details/124822909
版权

在Vue项当种style里面使用@import导入外部样式时不能使用@符号只能使用相对路径。

那么能不能使用@呢？答案是肯定的！

想使用@只需要在@前面加一个~就好了，希望能帮到你。

这篇博客完全是有感而发，帮助他人解决问题真的很有成就感，哪怕这个问题的本身没有难度！能够让一个人在我的认知范围内少走弯路，确实是一件美好且值得纪念的事情!

徐飞不会喝酒
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中引入样式的方法
qq_41743601的博客
08-18 9898
vue中引入样式的方法 文章目录vue中引入样式的方法1.引入css文件1.1在style标签中引入(可设置成局部)1.2全局引入1.3局部引入2.组件内部引入样式的污染3.同一个组件内新写样式4.@import和import的区别 1.引入css文件 1.1在style标签中引入(可设置成局部) 在标签上添加 scoped 属性后则变成了局部引用 注意：下图的icon.css文件仍然是全局引用，需要将文件后缀改为scss或者less才能变成局部的 在更换过程中建议改成scss类型，因为它支持css的所有
引入css样式的三种方法 link style @import及三者的区别
qq_43137725的博客
02-24 6182
通常我们想引入css样式，有很多方法，今天让我们一起来看一下，他们有什么不同呢？ 1. style 引入 style标签是放到html的head标签内部的，它是定义在当前页面的样式 <style> #outer { width: 300px; height: 300px; border: 1...
vue 样式文件引入方法
weixin_44076775的博客
04-28 1392
script标签 样式文件引入 import '@/style/reset.css' style标签 样式文件引入 @import '@/assets/iconfont/iconfont.css'; ![在这里插入图片描述](https://img-blog.csdnimg.cn/13b983758eba4e1fae53f2c4f4cb2494.png @import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。 解决办法：用styl
Vue项目：style样式篇
热门推荐
happy81997的博客
12-17 4万+
目录 一、动态使用样式 二、全局公共css样式文件 2.1 main.js中引入 2.2 index.html引入 三、单个vue文件中引入样式 四、样式作用范围控制 4.1 scoped私有作用域 4.2 混合使用 4.3 深度作用选择器 4.4 动态生成的dom的样式 一、动态使用样式 使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值 使用方法：...
关于使用Vue脚手架开发在组件的style标签中引入其他样式文件的两种方法
weixin_39651562的博客
11-12 1401
第一种 <stylelang="你的css扩展语言类型，如less"scopedsrc="~/assets/mLess/home.less"></style> 第二种： 在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使用 alias 相对路径的方法，感兴趣的朋友一起看看吧 在用 Webpack 处理打包...
VUE2中引入外部css文件的方式
m0_66051368的博客
03-05 5023
利用 @import 关键词引入, 此方式是一个全局引入 scr 路径引入 在 JS 中引入外部css模块 <template> <div></div> </template> <script> // 在JS中引入 外部css模块 import './assets/my.scss' // 与@import效果相同, 会影响所有组件 </script> // 方式2: 此..
vue使用一些外部插件及样式的配置代码
10-15
在Vue.js开发中，有时我们需要引入外部插件和样式来扩展功能或美化界面。这篇教程主要讲解了如何在Vue项目中配置外部插件和样式，包括全局CSS、jQuery、Bootstrap、Element UI、axios以及vue-cookies。以下是详细的...
vue如何使用外部特殊字体的操作
10-15
在Vue.js应用中，引入和使用外部特殊字体是一项常见的需求，尤其当设计师为项目提供了定制化的字体时。本文将详细讲解在Vue项目中如何操作，以便让这些特殊字体正确显示。 首先，你需要从网络上或者设计资源网站...
浅谈在vue中使用mint-ui swipe遇到的问题
10-17
本文将聚焦于在Vue项目中使用Mint UI的Swipe组件时可能会遇到的问题及解决方案。 首先，让我们回顾一下在Vue项目中集成Mint UI的步骤： 1. **安装**： 使用`npm`来安装Mint UI库，通过运行以下命令将其添加为项目...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
然而，在实际使用过程中，可能会遇到各种问题，其中图标样式排布错乱是一个常见的问题。本文将详细介绍如何解决这个问题。 首先，确保你已经正确地引入了`vue-quill-editor`。通常，我们会通过npm或yarn将其安装到...
Vue脚手架的简单使用实例
10-18
在Vue脚手架中集成其他库，如jQuery，可以通过`npm install`安装，然后在Webpack配置中使用`ProvidePlugin`，使全局可以访问到jQuery。例如： ```javascript plugins: [ new webpack.ProvidePlugin({ $: 'jquery',...
Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案
渣渣兔子的博客
05-11 3万+
。。。
vue import文件时@用法详解以及使用@后支持文件快速定位
wfly blog
10-23 4443
如图所示，引入PropsDemo.vue组件的时候，可以使用下列两种方法，而没有使用./或者../这种相对路径的写法 import PropsDemo from '@/components/common/test/PropsDemo' import PropsDemo from '@testCp/PropsDemo' 具体实现方法：找到webpack.base.conf.js配置文件...
css---四种导入方式
weixin_46218101的博客
09-09 591
web前端入门笔记之css（1） css是什么  CSS 指层叠样式表 (Cascading Style Sheets)  样式定义如何显示 HTML 元素  样式通常存储在样式表【.css文件、css区域】中  把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题  外部样式表可以极大提高工作效率  外部样式表通常存储在 CSS 文件中  多个样式定义可层叠为一 ...
Vue使用@import 引入样式文件全局污染问题
agua001的博客
12-10 4878
使用@import引入样式文件： <style scoped lang="less"> @import './style.less'; </style> 就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到， 这样的引入方式就会造成全局污染，即使你写了scoped。因为： @import并不是直接将目标文件的代码引入到使用的文件中来，而是发起了一个新的请求，获得相应资源，这个时候并没有加私有限制scoped，因此这种方式引入的文件将作
vue中引入样式方法
m0_53679031的博客
08-07 6555
vue样式引入问题
vue 项目中常用的几种import 书写 方式
最新发布
YHLSunshine的博客
01-24 2343
vue 项目中常用的几种import 书写 方式 及 export,import和export default的区别与联系
Vue 引入外部css样式两种方式 import 和link ； mixin.js的使用、全局引入封装的样式；
艾米的猫儿的博客
11-17 8458
全局使用动态样式及 mixins 的使用！
外部导入vue脚本使用vue如何导入组件
07-08
如果你想在外部导入 Vue 脚本，并使用 Vue 组件，可以按照以下步骤进行操作： 1. 首先，在你的项目中确保已经安装了 Vue.js，并在你的 HTML 文件中引入 Vue 脚本。例如： ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 2. 在你的项目中创建一个组件文件，例如 `MyComponent.vue`。 3. 在 `MyComponent.vue` 文件中，定义你的组件。例如： ```vue <template> <div> <!-- 组件的模板 --> </div> </template> <script> export default { // 组件的配置选项 } </script> <style scoped> /* 组件的样式 */ </style> ``` 4. 在你的外部 JavaScript 文件中，使用 `import` 语句将组件导入。例如： ```javascript import MyComponent from './MyComponent.vue' ``` 5. 创建一个 Vue 实例，并在组件选项中注册这个组件。例如： ```javascript new Vue({ el: '#app', components: { MyComponent } }) ``` 6. 在你的 HTML 文件中，使用组件标签来渲染这个组件。例如： ```html <div id="app"> <my-component></my-component> </div> ``` 现在，你可以在外部导入的 Vue 脚本中使用 `MyComponent` 组件了。确保根据你的项目结构和文件路径做相应的调整。 请注意，这种方式需要使用构建工具（例如 webpack）来处理模块导入和构建项目。如果你只是想在浏览器中直接使用 Vue，你可以使用 `<script>` 标签引入 Vue，并将组件定义在全局作用域中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值