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

更新时间：2019年12月02日 15:15:47 作者：淋着

这篇文章主要介绍了浅谈关于vue中scss公用的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

简述

最近由于项目要求查阅了很多关于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>

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一样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中axios解决跨域问题和拦截器的使用方法
下面小编就为大家分享一篇vue中axios解决跨域问题和拦截器的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue修饰符的使用详解
为了方便大家写代码，Vue给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符
2022-10-10
antd 表格列宽自适应方法以及错误处理操作
这篇文章主要介绍了antd 表格列宽自适应方法以及错误处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue中qs插件的使用详解
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为
这篇文章主要介绍了vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为,其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
Vue中的匿名插槽与具名插槽详解
这篇文章主要为大家介绍了Vue中的匿名插槽与具名插槽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
一文搞懂vue编译器(DSL)原理
本文主要介绍了一文搞懂vue编译器(DSL)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vue3实现优雅加载图片的动画效果
这篇文章主要为大家详细介绍了Vue3如何实现加载图片时添加一些动画效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
2023-10-10
vite项目无法使用zangodb包装器的解决方案
vite作为新一代工具链,具有很多便利之处,配置也非常简单,它很好地整合了Rollup和其他复杂的构建项,并提供了多种方向的典型脚手架模板,深受大家喜爱,本文给大家介绍了如何解决vite项目无法使用zangodb包装器的问题,需要的朋友可以参考下
2023-10-10
vue2.0中click点击当前li实现动态切换class
本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06