vue-cli中配置全局sass变量

2018-06-14 admin

配置

安装: 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>

原文链接:https://segmentfault.com/a/1190000015287756

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34042.html

文章标题:vue-cli中配置全局sass变量

相关文章
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
JavaScript变量作用域
当你声明一个变量的任何功能外,它被称为一个全局变量,在代码中任何地方都能访问到的对象拥有全局作用域。 当你声明一个变量在一个函数,它被称为一个局部变量,只能在函数内部访问。 JavaScript在ECMAScript 6之前没有块语句的规范...
2015-11-12
回到顶部