浅谈关于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 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vue构建动态表单的方法示例
Sep 22 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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通过function_exists检测函数是否存在的方法
2015/03/18 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python切换hosts文件代码示例
2013/12/31 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB