vue-cli中配置全局sass变量

BlackFlagBin 发布于2019-08-22 18:04 / 2776人阅读

摘要：配置安装修改的目录下选项修改为如下选项个人使用习惯我这里是指定了为我的根文件，其他的文件都引入到这个文件中。

配置

安装：
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环境，网上很多教程，就不必多说了。

云服务器 GPU云服务器在c语言中全局变量配置库文件中的变量全局变量全局变量操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95462.html

vue-cli中配置全局sass变量

摘要：如何定义样式的变量，使得全局的样式可以在组件中使用，网上找了一些办法，亲测可以使用，我就记录下来安装修改的目录下，如图是样式文件重新运行如何定义样式的变量，使得全局的样式可以在组件中使用，网上找了一些办法，亲测可以使用，我就记录下来； 1、安装sass-resources-loader npm i sass-resources-loader --save-dev 2、修改vue-cl...

MingjunYang 2019-08-23 16:57 评论0 收藏0
如何更有效率和质量地开发Vue项目

摘要：前言自总结完了上篇前端工程化的思想，并在全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发项目，以及其中踩过的一个个坑。。。前言自总结完了上篇前端工程化的思想，并在vue全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发vue项目，以及其中踩过的一个个坑。。。基于vue-cli的自定义模板（Custom Templates）小伙伴们的vue项目应该都...

ShevaKuilin 2019-08-20 18:15 评论0 收藏0
揭秘vue——vue-cli3全面配置

摘要：中可以使用注入变量访问环境变量中的配置信息向全局样式传入共享的全局变量在中引用添加兼容在中添加配置完整配置持续更新中揭秘系列目录 √ 配置多环境变量 √ 配置基础 vue.config.js √ 配置 proxy 跨域 √ 修复 HMR(热更新)失效 √ 修复 Lazy loading routes Error： Cyclic dependency √ 添加别名alias √ 压缩...

hatlonely 2019-08-23 13:10 评论0 收藏0
在vue-cli中应用scss/less全局变量

摘要：首先需要安装插件修改的，找到的加载设置修改为，这里的路径即是我们定义全局变量的地方修改的，找到的加载设置这里的路径即是我们定义全局变量的地方替换成上面自定义的函数更多详细知识介绍请访问我的个人主页首先需要安装插件：sass-resources-loader npm i sass-resources-loader --save-dev scss: 修改vue-cli的build/uti...

Alex 2019-08-23 16:20 评论0 收藏0