scss全局混入配置（引用）

在main.js和app.vue中引入混入后，并不能直接在全局使用

要使混入全局声明，可以在vue.config.js中配置（方法2实证可行）

 

a.方法1

如果使用的是vue-cli的版本是比较低的版本，我们可以通过使用 sass-resources-loader这个插件，修改vue-cli的目录下build/utils.js 。从而实现scss文件的共享。

步骤1：首先安装sass-resources-loader这个插件。

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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这个插件。

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

步骤2：在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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这个插件。

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

步骤2：在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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')     ]    })   })  } }

 

引用自https://www.jb51.net/article/175576.htm