vue-cli中設置全局sass變量

2023年12月31日 196次阅读 来源: John

設置

裝置：
sass-resources-loader

npm i sass-resources-loader --save-dev

修正vue-cli的目錄下build/utils.js

scss選項修正為以下選項：

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader:'sass-resources-loader',
      options:{
        resources:path.resolve(__dirname,'../src/assets/sass/base_core.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

個人運用習氣

我這裡是指定了../src/assets/sass/base_core.scss為我的根scss文件，其他的scss文件都引入到這個scss文件中。

//  ../src/assets/sass/base_core.scss
@import "./_setting.scss";
@import "./_css3.scss";
@import "./_mixin.scss";

./_setting.scss里放的是一切靜態scss變量

$fontsize-tiny:          ptr(12px)!default;
$fontsize-small:         ptr(14px)!default;

./_mixin.scss里放的是公用的混合器或許通用類

//截字
//SCSS 的”%” 與 “.” 功用相似，然則不會輸出代碼
%ellipsis-basic {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//筆墨超越后以...顯現 支撐多行
@mixin fn-ellpisis($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

固然，怎樣歸類是個人習氣題目。

如許，我僅僅在build/utils.js下引入一次，就能夠在一切的vue組件中運用全局scss相干，而不再須要每一個vue組件都引入一次了，固然，打包也是按需打包的，用到什麼scss才會打包什麼scss。

怎樣運用

固然，在vue-cli中怎樣設置sass環境，網上許多教程，就沒必要多說了。

<template>
  <div class="demo">
    demo
  </div>
</template>

<script>
export default {
  name: 'demo'
}
</script>

<style lang="scss">
//直接用就好，不必零丁援用你的sass包了
#demo{
    color:$fontsize-tiny;
    @extend %ellipsis-basic;
    @include fn-ellpisis(2);
}
</style>
    原文作者：John
    原文地址: https://segmentfault.com/a/1190000015287756
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞