vueCli引用css样式的两种方式

vue 专栏收录该内容
9 篇文章 0 订阅

安装使用

在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分代码,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
现在我们来安装sass/scss loader

 cnpm install sass-loader node-sass --save-dev

安装后,有的时候无需配置,vue-loader允许能根据lang属性自动判断出要使用的loaders;
如果不生效,则需要在webpack.base.conf.js中 rules增加以下配置.

{
test: /\.scss$/,
  loaders: ["style","css","sass"]
},

然后使用的时候引入 
@import "../static/css/user.css";
或者
<style scoped src="../../assets/pc/css/style.css"></style> 

注意:
<style scoped src="../../assets/pc/css/style.css"></style> 在webpack.base.conf.js中没有配置rules,也是可以使用的;

使用区别
使用@import引入外部css,作用域是全局的
 import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped
<style scoped>
@import "../static/css/user.css";
</style>

我们只需把@import改成<style src=""></style>引入外部样式,就可以解决样式是全局的问题
<style scoped src="../static/css/user.css">
<style scoped>
.user-content{
  background-color: #3982e5;
}
</style>

 

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值