浅谈关于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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
详解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 读取Postgresql中的数组
2013/04/14 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
20行python代码实现人脸识别
2019/05/05 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
2014信息公开实施方案
2014/02/22 职场文书
四议两公开实施方案
2014/03/28 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android