vue项目+局部样式使用全局sass样式变量

1.定义变量文件variables.scss 内容如下:

//sass定义全局变量
$menuText: #f5f5f5;
//菜单文字选中颜色
$menuActiveText:#409EFF;
//子菜单文字选中颜色
$subMenuActiveText:#f4f4f5;
//菜单背景颜色
$menuBg:#304156;
//菜单悬浮背景色
$menuHover:#263445;
//子菜单背景色
$subMenuBg:#1f2d3d;
//子菜单悬浮背景色
$subMenuHover:#001528;
//菜单宽度
$sideBarWidth:210px;

2.使用变量如下:

<style lang="scss">
    @import "~@/styles/variables.scss"; // 引入样式变量
    .description_text {
        padding: 10px;
        .title {
            font-weight: 700;
            font-size: $fontSizeLargeTitle;            //在这里使用注意是scss语法.
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 12px;
            border-bottom: 1px solid #ccc9c9;
            padding: 4px;
        }
        .term {
            color: rgba(0,0,0,.85);
            font-weight: 400;
            font-size: $fontSize;
            text-align: right;
            padding: 10px 5px;
            &:after {
                content: ":";
                margin: 0 8px 0 2px;
                position: relative;
                top: -0.5px;
            }
        }
   

//注意:如果在less文件中 使用sass文件变量,编译是会报错的...