vue引入css（vue引入css文件报错）

本篇文章给大家谈谈vue引入css，以及vue引入css文件报错对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、2018-09-06 关于在vue中使用外部js，css的过程
• 2、vue引入公共css文件
• 3、vue 怎么require css文件
• 4、vue3点击之后加css样式

2018-09-06 关于在vue中使用外部js，css的过程

  走访了好几个移动框架，来回切换了几次，发现都不是很适合我使用，要么是组件不够用，要么是组件无法二次封装。我在自己的项芦配皮目中大多是需要使用框架之样式，所以思来想去还是用比较熟悉的mui移动框架（ 官方网址 ）。但是mui是没法使用npm进行安装的（一大遗憾），思来想去于是将mui框架所需的卖差js,css文件放在static目录下：

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量，陪差需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案，谢谢。

[img]

vue引入公共css文件

如图是一个常见的vue文件结构

在app.html 或者*.vue中引入陆腔郑css，如下所示：

在 app.html引入css对阵个页圆散面都生早颂效，在vue文件中引入，只对改vue生成的页面有效

vue 怎么require css文件

首先，引入公共样式时，我们在“main.js”里使用AMD的方式引入,即

?

1

require('./assets/css/main.less');

require();

这时，我们会抛出一个错误，是因为我们没有写解析的依赖，webpack不知道怎么解析

这时，我们要填写上依赖，

?

1

require('!style!css!less!./assets/css/main.less');

在很多以前的博客里都是以上写法，这个是Vue 2.0刚开始罩枯的，现在使用会报错；下面是正确写法

?

1

require('!style-loader!css-loader!less-loader!./assets/css/main.less');

在以前配置到这里，就万事大吉了，也可以开始引入css文件了，然后现在到档闷中这里还会报错

当出现以上错误时行山，说明你的项目里缺少依赖；

?

1

npm install style-loader --save

这时你就可以引入css文件了；

vue3点击之后加css样式

vue3点衫亏击之后加css样式在Vue3中可以再css标签中使用v-bind(***)来绑定一个属性山闹控制它的样式,注意:【如果你的数据不是使用Vue3的逗塌罩 ref 或者 reactive使其变成响应...

关于vue引入css和vue引入css文件报错的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。