首页 > Web开发 > 详细

vue-cli3使用全局scss

时间:2020-02-27 20:49:39      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:fig   exports   color   相同   scss   ESS   

在开发项目的时候,经常会出现多个元素样式相同,比如颜色相同.这里就需要我们设置公共样式,方便后期调试

一配置方法

  1.在src/assets/styles目录下创建文件variable.scss

//variable.scss
$icon-color: #23beae;  

  2.在vue.babel.config中配置如下

module.exports={
//...
   css:{
       loaderOptions:{
           sass:{
            prependData:`@import "@/assets/styles/variable.scss";`
           }
       }
   }
}

  3.在vue组件中使用

.header {
        height: 1.14rem;
        width: 100%;
        padding: 0.2rem;
        display: flex;
        font-size: 0.32rem;
        color: $icon-color;
}

二.常见错误

  1.在配置vue.babel.config的时候,旧版本data,新版本是prependData

  2.报错SassError: media query expression must begin with ‘(‘.

     解决方案:在@import "@/assets/styles/variable.scss"`中缺少了;.正确写法在上面

vue-cli3使用全局scss

标签:fig   exports   color   相同   scss   ESS   

原文:https://www.cnblogs.com/liuXiaoDi/p/12374251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号