在vue中通过设置的路径别名引入样式文件为什么会失败

图片说明
图片说明
图片说明
如图,怎么在一个组件里通过绝对路径引入样式文件

1个回答

因为你配置的extensisons只有.js .json .vue 没有配置.css

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

Vue.js 关于Vue.js中样式引入问题

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?

在vue项目中,在入口主文件index.js中引入less样式文件报错

引入方式如下:![图片说明](https://img-ask.csdn.net/upload/201804/26/1524749855_572114.png) 报错说明如下:![图片说明](https://img-ask.csdn.net/upload/201804/26/1524750046_435848.png) 参考了其他问题的回答,说是需要在build文件下的webpack.base.conf.js中加上 ``` { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, ``` 可是并没有解决,一样报错,求大神帮忙解决,非常感谢!

vuecli4 引入vantUI 样式导入不成功

使用vuecli4,按需引入vantui 样式引入不成功 main.js中引入 ``` import {Button} from 'vant' Vue.use(Button) ``` babel.config.js ``` module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', // 指定样式路径 style: true }, 'vant'], ] }; ``` 页面使用 ``` <van-button type="primary" size="large" @click="add">按钮</van-button> ``` 效果

vue引入js报错无法使用

最近在开发一个vue项目,我在网上找了一个webpack打包好的HTML的模板, 然后将页面分成多个组件,分别在vue中实现,但是在引入js时出现了问题,我吧js文件放在了assets下,引入时一直报错这个js中有文件找不到,这个js主要是监听一些DOM元素,动态添加一些样式,还有各种事件的监听,并没有定义一些调用的函数。我试过把js单独部署在tomcat中然后再vue项目index.html中以链接的方式引入就可以正常使用,就是不能zaivue项目中存放、编译、使用

vue 项目中怎么引用js文件

vue 项目中怎么引用js文件,我在vue组件里拷入了一个模板页面,css引入了,但是一些js文件无法引用

html引入vue路由组件,怎么设置路由根目录?

``` <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> ```Vue.use(VueRouter); const router=new VueRouter({ }) new Vue({ router, ```this.$router.push({ path: 'http://localhost:8080/', query: { tit: this.username, price: this.phone, sid: this.date, } ``` 我的项目是html的,但是里面引入vue组件,想进行带参跳转页面,但是跳转时路径是拼接在当前路径后面,相当于又拼接了一段路径。怎么解决,这个只是html引入vuejs

Vue main.js文件引入的时候 什么时候需要import xx from 'xx'

初学者 在main.js里引入本地的js或者css的时候 分不清楚 什么时候使用(这个文件是在vue项目中单独建的一个文件) import xx from './xx/.js' 什么时候使用 import './store/store.js' 这俩有什么区别吗? ![图片说明](https://img-ask.csdn.net/upload/201902/01/1549012943_848348.png)![图片说明](https://img-ask.csdn.net/upload/201902/01/1549012953_154871.png) 比如这种 export default api 是 undefined api 注销了 就是这个错

vue框架引入第三方样式不生效

main.js中import了一些样式不生效,也不报错,按照网上说的教程也改了,求解

在html文件中引用vue.js和直接创建.vue文件有什么差别??

在html文件中引用vue.js和直接创建.vue文件有什么差别??

vue-cli引入css一直失败

vue-cli用的webpack-simple模板在main.js中import './assets/css/main.css' 报错:Canot find module 'assets/css/main.css' 不知道问什么,求大神帮忙解决一下

vue上传文件 后台获取文件名问本地磁盘路径??

1.使用ele上传组件 后台使用 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile clFile = multipartRequest.getFile("uplaodCl"); String originalName = clFile.getOriginalFilename(); 获取文件信息为文件名 项目为vue+springBoot 现象获取到的是本地的磁盘路径:C:\Users\Administrator\Desktop\测试文件.txt

Vue项目 引入.sass未后缀名的css文件就报错 怎么解决?

## 背景:VsCode+Vue ## ## 目的:定位问题 ## ![图片说明](https://img-ask.csdn.net/upload/201911/07/1573095386_555447.jpg)

vue 中引入 mnt-ui 可是在页面中并不显示,而且vue是通过 render的方式添加到页面中的

在vue页面中添加了 mint-ui 的样式,可是在vue的模板中并没有显示,并且vue是通过render 的方式添加到html中的,在使用的时候浏览器却出现了runtime-only的错误,并且在引入mint-ui 的时候,对于css文件的拦截使用的拦截器,loader和use有什么区别么,为什么使用use会报错,只能使用 loader进行拦截器的加载 ``` module: { rules: [ { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, loader: 'style-loader', loader: 'css-loader' }, { test: /\.jpg$/, use: 'url-loader' ``` ``` <template> <div> <ul v-for="(item,index) in list" v-bind:key="index"> <li>{{ item.id }} +"..."+{{ item.name }}</li> </ul> <span class="glyphicon glyphicon-heart" aria-hidden="true">aa</span> <router-link to="/app1">app1</router-link> <router-link to="/app2">app2</router-link> <router-view></router-view> <mt-button type="primary">primary</mt-button> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: "111" }, { id: 2, name: "222" }, { id: 3, name: "333" }, { id: 4, name: "444" } ] }; } }; import $ from "jquery"; $(function() { $("ul>li:odd").css("backgroundColor", "pink"); $("ul>li:even").css("backgroundColor", "purple"); }); </script> <style> @import "../node_modules/bootstrap/dist/css/bootstrap.css"; @import "./css/index.css"; ****@import "../node_modules/mint-ui/lib/style.css";**** </style> ```

Vue CLI 如何引入第三方js文件

第三方库: https://github.com/google/blockly 需要引入两个js文件 blockly_compressed.js blocks_compressed.js 使下边的代码正常运行 ``` <template> <div id="lesson1"> <h1>挑战1</h1> <hr> <div id="blocklyDiv" style="height: 480px; width: 600px;"></div> <xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="logic_compare"></block> <block type="controls_repeat_ext"></block> <block type="math_number"> <field name="NUM">123</field> </block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> </div> </template> <script> Vue.use(Blocks) var workspace = Blockly.inject('blocklyDiv', { toolbox: document.getElementById('toolbox') }); </script> ``` --- @oyljerry # 这样还是不行 ``` <template> <div id="lesson1"> <h1>挑战1</h1> <hr> <div id="blocklyDiv" style="height: 480px; width: 600px;"></div> <xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="logic_compare"></block> <block type="controls_repeat_ext"></block> <block type="math_number"> <field name="NUM">123</field> </block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> </div> </template> <script> import Blockly from '../../public/blockly_compressed.js' Vue.use(Blockly) import Blocks from '../../public/blocks_compressed.js' Vue.use(Blocks) var workspace = Blockly.inject('blocklyDiv', { toolbox: document.getElementById('toolbox') }); </script> ```

Vue中的resoure请求根路径怎么动态修改

1.man.js中设置了resource请求的根路径 ``` import VueResource from 'vue-resource' Vue.use(VueResource); Vue.http.options.root = store.state.httpLocation; Vue.http.options.emulateJSON = true; ``` 2.需求是,我在登录时需要设置请求的域名的端口号 怎样才能动态修改? 我在登录组件用使用 ``` this.$http.options.root = newValue; ``` 并不能修改,也不报错。 请问怎么解决啊?

在Vue中引入ueditor时报错

我在Vue中引入下载的ueditor插件,但是用浏览器访问的时候报一下错误,求大神指导下,刚接触,不太了解 ![图片说明](https://img-ask.csdn.net/upload/201807/03/1530603258_246144.png)![图片说明](https://img-ask.csdn.net/upload/201807/03/1530603306_526780.png)

vue 动态引入url加载不到图片,路径没问题

![读取不到图片](https://img-ask.csdn.net/upload/201906/08/1559972257_471702.png)

vscode自定义插件路径失败

vscode新手 最近想用vscode开发vue 在修改插件路径时遇到问题 使用命令code --extensions-dir D:\Microsoft VS Code\extensions修改插件路径 回车后重启vscode成功 但是重新安装的插件位置并不在我定义的这个路径D:\Microsoft VS Code\extensions中 反而在D:\Microsoft中 后来还是通过修改快捷方式目标的方式成功转移的 请问上面的方法哪里有问题吗![图片说明](https://img-ask.csdn.net/upload/201908/08/1565242022_117144.jpg)

vuejs外部js引入外部网站提供的js在路由之后刷新页面导入这个引入的文件不能使用

vue中我在index.html中引入的。 ![图片说明](https://img-ask.csdn.net/upload/201610/22/1477103864_760660.png) 但是这样有个问题,vue的路由我从主页进入引入腾讯地图的组件是可以使用的。 但是在引入腾讯地图的组件页面刷新之后腾讯地图就不能使用了。 我猜这个可能是这个js没有引入进来,因为不是从主页进入的就没加载

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 按行txt c#怎么扫条形码 c#打包html c# 实现刷新数据 c# 两个自定义控件重叠 c#浮点类型计算 c#.net 中文乱码 c# 时间排序 c# 必备书籍 c#异步网络通信
立即提问