快捷導(dǎo)航

淺談關(guān)于vue中scss公用的解決方案

更新時(shí)間：2019年12月02日 15:15:47 作者：淋著

這篇文章主要介紹了淺談關(guān)于vue中scss公用的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

簡(jiǎn)述

最近由于項(xiàng)目要求查閱了很多關(guān)于scss公用的文章，以下只是對(duì)那些文章進(jìn)行簡(jiǎn)單的總結(jié)

解決方法

a.當(dāng)我們要使用scss文件的共用時(shí)，首先我們就要想到如何應(yīng)當(dāng)如何編輯scss文件，比如降低scss文件的變量與混入的耦合，我們可以將scss文件中的變量和混入分離開(kāi)來(lái)使用單獨(dú)的文件存儲(chǔ)，此外還可以編寫(xiě)一些默認(rèn)樣式的scss文件。

variable.scss：存儲(chǔ)scss變量的文件

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

mixin.scss：存儲(chǔ)scss混入的文件

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

base.scss：存儲(chǔ)默認(rèn)樣式的scss文件

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

b.現(xiàn)在最關(guān)鍵的是如何讓vue組件也能用使用我們定義的公用的scss文件，當(dāng)然我們也可以在每個(gè)組件中使用import語(yǔ)句導(dǎo)入相應(yīng)的scss文件，但是這樣會(huì)導(dǎo)致代碼臃腫，難以維護(hù)。所以我們可以借助相關(guān)工具來(lái)解決這個(gè)問(wèn)題。

a.方法1

如果使用的是vue-cli的版本是比較低的版本，我們可以通過(guò)使用 sass-resources-loader這個(gè)插件，修改vue-cli的目錄下build/utils.js 。從而實(shí)現(xiàn)scss文件的共享。

步驟1：首先安裝sass-resources-loader這個(gè)插件。

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

步驟2：修改build文件夾下的utils.js文件,找到return選項(xiàng)，修改它的scss屬性進(jìn)行入下配置，其他不用改變。

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  //修改這個(gè)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：測(cè)試階段，新建一個(gè)Test.vue組件，進(jìn)行入下配置

<template>
 <div>
  <!-- test類的默認(rèn)樣式 -->
  <div class="test">
   test
  </div>
  <div class="box2">
   ssss
  </div>
 </div>
</template>
<style lang="scss">
 .test{
  //訪問(wèn)公共的scss變量 
  font-size:$tsize;
  background: $bg;
 }
 .box2{
  //訪問(wèn)公共的scss混入 
  @include wh($w2,$h2) 
 }
</style>

b.方法2

如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js這個(gè)文件的css.loaderOptions選項(xiàng)，就可以讓每個(gè)組件使用公用的scss文件了。

步驟1：同樣首先安裝sass-resources-loader這個(gè)插件。

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

步驟2：在項(xiàng)目主目錄下新建一個(gè)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: {
       //依次導(dǎo)入的公用的scss變量，公用的scss混入，共用的默認(rèn)樣式
       prependData: `
         @import "./src/assets/css/variable.scss";
        @import "./src/assets/css/mixin.scss";  
         @import "./src/assets/css/base.scss";
       `
     }
   }
  }
 }

步驟3：測(cè)試階段，和方法一的步驟3一樣。

c.方法3

如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js這個(gè)文件的chainWebpack這個(gè)屬性來(lái)實(shí)現(xiàn)多個(gè)scss文件的公用。

步驟1：同樣首先安裝sass-resources-loader這個(gè)插件。

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

步驟2：在項(xiàng)目主目錄下新建一個(gè)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'),
     //共用的默認(rèn)樣式 
     path.resolve(__dirname,'./src/assets/css/base.scss')
    ]
   })
  })
 }
}

步驟3：測(cè)試階段，和方法一的步驟3一樣。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: