浅谈关于vue中scss公用的解决方案


Posted in Javascript onDecember 02, 2019

简述

最近由于项目要求查阅了很多关于scss公用的文章,以下只是对那些文章进行简单的总结

解决方法

a.当我们要使用scss文件的共用时,首先我们就要想到如何应当如何编辑scss文件,比如降低scss文件的变量与混入的耦合,我们可以将scss文件中的变量和混入分离开来使用单独的文件存储,此外还可以编写一些默认样式的scss文件 。

variable.scss:存储scss变量的文件

@charset 'utf-8';
$bg:skyblue;
$w:100px;
$h:100px;
$tsize:50px;
$w2:200px;
$h2:200px;

mixin.scss:存储scss混入的文件

@charset 'utf-8';
@mixin wh($w,$h) {
 width: $w;
 height: $h;
 border: 1px solid red;
}

base.scss:存储默认样式的scss文件

@charset 'utf-8';
.test{
 border: 5px solid pink;
 height: 100px;
 width: 100px;
}

​ b.现在最关键的是如何让vue组件也能用使用我们定义的公用的scss文件 ,当然我们也可以在每个组件中使用import语句导入相应的scss文件,但是这样会导致代码臃肿,难以维护。所以我们可以借助相关工具来解决这个问题。

a.方法1

如果使用的是vue-cli的版本是比较低的版本,我们可以通过使用 sass-resources-loader这个插件,修改vue-cli的目录下build/utils.js 。从而实现scss文件的共享。

步骤1:首先安装sass-resources-loader这个插件。

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

步骤2:修改build文件夹下的utils.js文件,找到return选项,修改它的scss属性进行入下配置,其他不用改变。

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  //修改这个scss属性
  scss: generateLoaders('sass').concat({
   loader:'sass-resources-loader', 
     options:{ 
     resources:[
      path.resolve(__dirname,'../src/assets/variable.scss'),
      path.resolve(__dirname,'../src/assets/mixin.scss'),
      path.resolve(__dirname,'../src/assets/base.scss') 
     ]
     }
  }),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

步骤3:测试阶段,新建一个Test.vue组件,进行入下配置

<template>
 <div>
  <!-- test类的默认样式 -->
  <div class="test">
   test
  </div>
  <div class="box2">
   ssss
  </div>
 </div>
</template>
<style lang="scss">
 .test{
  //访问公共的scss变量 
  font-size:$tsize;
  background: $bg;
 }
 .box2{
  //访问公共的scss混入 
  @include wh($w2,$h2) 
 }
</style>

浅谈关于vue中scss公用的解决方案

b.方法2

如果使用的vue-cli的版本是高版本的,那么可以直接修改vue.config.js这个文件的css.loaderOptions选项,就可以让每个组件使用公用的scss文件了。

步骤1:同样首先安装sass-resources-loader这个插件。

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

步骤2:在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章

const path=require('path')
 module.exports={
  publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
  assetsDir:'assets',
  indexPath:'myIndex.html',
  filenameHashing:false,
  productionSourceMap: false,
  css: {
   loaderOptions: {
     sass: {
       //依次导入的公用的scss变量,公用的scss混入,共用的默认样式
       prependData: `
         @import "./src/assets/css/variable.scss";
        @import "./src/assets/css/mixin.scss";  
         @import "./src/assets/css/base.scss";
       `
     }
   }
  }
 }

步骤3:测试阶段,和方法一的步骤3一样。

c.方法3

如果使用的vue-cli的版本是高版本的,那么可以直接修改vue.config.js这个文件的chainWebpack这个属性来实现多个scss文件的公用。

步骤1:同样首先安装sass-resources-loader这个插件。

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

步骤2:在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章

const path=require('path')
module.exports={
 publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
 assetsDir:'assets',
 indexPath:'myIndex.html',
 filenameHashing:false,
 productionSourceMap: false,
 chainWebpack:config=>{
  const types=['vue']
  types.forEach(type=>{
   config.module.rule('scss').oneOf(type).use('style-resource')
   .loader('style-resources-loader')
   .options({
    patterns:[
     //公用的scss变量 
     path.resolve(__dirname,'./src/assets/css/variable.scss'),
     //公用的scss混入 
     path.resolve(__dirname,'./src/assets/css/mixin.scss'),
     //共用的默认样式 
     path.resolve(__dirname,'./src/assets/css/base.scss')
    ]
   })
  })
 }
}

步骤3:测试阶段,和方法一的步骤3一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
详解react-redux插件入门
Apr 19 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
python多重继承实例
2014/10/11 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
python将unicode转为str的方法
2017/06/21 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
烹饪自我鉴定
2014/03/01 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
工作岗位说明书模板
2014/05/09 职场文书
应聘教师自荐书
2014/06/16 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
西安大雁塔导游词
2015/02/10 职场文书
法定代表人资格证明书
2015/06/18 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
oracle索引总结
2021/09/25 Oracle
一条慢SQL语句引发的改造之路
2022/03/16 MySQL