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

时间 2019-12-20

标签关于 vue scss 公用解决方案繁體版

原文原文链接

简述

最近因为项目要求查阅了不少关于scss公用的文章，如下只是对那些文章进行简单的总结javascript

解决方法

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

variable.scss：存储scss变量的文件html

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

mixin.scss：存储scss混入的文件vue

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

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

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

b.如今最关键的是如何让vue组件也能用使用咱们定义的公用的scss文件，固然咱们也能够在每一个组件中使用import语句导入相应的scss文件，可是这样会致使代码臃肿，难以维护。因此咱们能够借助相关工具来解决这个问题。vue-cli

a.方法1

若是使用的是vue-cli的版本是比较低的版本，咱们能够经过使用 sass-resources-loader这个插件，修改vue-cli的目录下build/utils.js 。从而实现scss文件的共享。npm

步骤1：首先安装sass-resources-loader这个插件。segmentfault
```
npm i sass-resources-loader --save-dev
```

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

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组件，进行入下配置less

<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-cli中chainWebpack的使用
 在vue中引用.SCSS的公用文件