vue-cli3使用全局scss

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

一配置方法

　　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"`中缺少了;.正确写法在上面