vue 中全局使用common.scss

首先我们在Style文件夹下面新建一个common.scss

// 公用主题颜色设置
$moralColor:#2FFEC4;

// 文字溢出隐藏显示...
@mixin text-overflow($line: 1) {
  @if $line==1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  } @else {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

然后vue.config.js 里面配置如下

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

但是官方文档写法是采用的  additionalData 而不是 prependData 运行直接报错

页面使用

.notice-item-content {
  @include  text-overflow(2);
  color: $moralColor;
}

以上就是在 vue 是使用common.scss的方法了

顺便推荐一波大神封装的common.scss的库 github.com/forever-z-1…