vue中scss常用解决方案简介

.test{//访问公共scss变量font-size:$tsize;背景：$bg；}.box2{//访问混合在@includew中的公共scssh($w2,$h2)}最近因为项目需要，查阅了很多关于常用scss的文章。以下只是对这些文章的简要总结。解决方案当我们要共享scss文件时，首先我们要考虑如何编辑scss文件，比如降低scss文件的变量和mix-in的耦合度。我们可以将scss文件中的变量和mix-in分开，使用单独的文件存储。另外，我们也可以写一些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';@mixinwh($w,$h){width:$w;身高：$h；border:1pxsolidred;}base.scss:存储默认样式scss文件@charset'utf-8';.test{border:5pxsolidpink;高度：100px；宽度：100px;}b。现在最重要的是如何让vue组件也使用我们定义的普通scss文件，当然我们也可以在每个组件中使用import语句导入对应的scss文件，但是这样会造成代码臃肿，难以维护。所以我们可以使用相关的工具来解决这个问题。A。方法一如果vue-cli版本比较低，我们可以通过sass-resources-loader插件修改vue-cli目录下的build/utils.js。从而实现scss文件的共享。第一步：首先安装sass-resources-loader插件。npmisass-resources-loader--save-dev第二步：修改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')}第三步：在测试阶段，新建一个Test.vue组件并配置.test{//访问公共scss变量font-size:$tsize;背景：$bg；}.box2{//访问混合在@includew中的公共scssh($w2,$h2)}b.方法二如果使用的vue-cli版本是高版本，那么可以直接修改vue.config.js文件的css.loaderOptions选项，让每个组件使用一个通用的scss文件。第1步：同样首先安装sass-resources-loader插件。npmisass-resources-loader--save-dev第二步：在项目主目录新建vue.config.js配置文件。大概的配置可以参考这篇文章constpath=require('path')module.exports={publicPath:process.env.NODE_ENV==='production'?'/public/':'./',assetsDir:'assets',indexPath:'myIndex.html',filenameHashing:false,productionSourceMap:false,css:{loaderOptions:{sass:{//常用的scss变量导入一个一、commonscss混入，commondefaultstyleprependData:`@import"./src/assets/css/variable.scss";@import"./src/assets/css/mixin.scss";@import"./src/assets/css/base.scss";`}}}}第三步：测试阶段，同方法一第三步。c．方法三如果使用的vue-cli版本为高版本，可以直接修改vue.config.js文件的chainWebpack属性，实现多个scss文件的共享。第1步：同样首先安装sass-resources-loader插件。npmisass-resources-loader--save-dev第二步：在项目主目录新建vue.config.js配置文件。大概的配置可以参考这篇文章constpath=require('path')module.exports={publicPath:process.env.NODE_ENV==='production'?'/public/':'./',assetsDir:'assets',indexPath:'myIndex.html',filenameHashing:false,productionSourceMap:false,chainWebpack:config=>{consttypes=['vue']types.forEach(type=>{config.module.rule('scss').oneOf(type).use('style-resource').loader('style-resources-loader').options({patterns:[//Commonscssvariablespath.resolve(__dirname,'./src/assets/css/variable.scss'),//普通scssmixinpath.resolve(__dirname,'./src/assets/css/mixin.scss'),//commondefaultstylepath.resolve(__dirname,'./src/assets/css/base.scss')]})})}}第三步：测试阶段，同方法一第三步，参考使用vue-cli中的chainWebpack，参考vue中.SCSS的公用文件