hbuilderx2.9.8公⽤css样式_浅谈关于vue中scss公⽤的解决⽅
案
简述
最近由于项⽬要求查阅了很多关于scss公⽤的⽂章，以下只是对那些⽂章进⾏简单的总结
解决⽅法
a.当我们要使⽤scss⽂件的共⽤时，⾸先我们就要想到如何应当如何编辑scss⽂件，⽐如降低scss⽂件
的变量与混⼊的耦合，我们可以将scss⽂件中的变量和混⼊分离开来使⽤单独的⽂件存储，此外还可以编写⼀些默认样式的scss⽂件。
variable.scss：存储scss变量的⽂件
mixin.scss：存储scss混⼊的⽂件
base.scss：存储默认样式的scss⽂件
b.现在最关键的是如何让vue组件也能⽤使⽤我们定义的公⽤的scss⽂件，当然我们也可以在每个组件中使⽤import语句导⼊相应的scss ⽂件，但是这样会导致代码臃肿，难以维护。所以我们可以借助相关⼯具来解决这个问题。
a.⽅法1
如果使⽤的是vue-cli的版本是⽐较低的版本，我们可以通过使⽤sass-resources-loader这个插件，修改vue-cli的⽬录下build/utils.js。从⽽实现scss⽂件的共享。
步骤1：⾸先安装sass-resources-loader这个插件。
步骤2：修改build⽂件夹下的utils.js⽂件，到return选项，修改它的scss属性进⾏⼊下配置，其他不⽤改变。
css变量步骤3：测试阶段，新建⼀个Test.vue组件，进⾏⼊下配置
b.⽅法2
如果使⽤的vue-cli的版本是⾼版本的，那么可以直接修改fig.js这个⽂件的css.loaderOptions选项，就可以让每个组件使⽤公⽤的scss⽂件了。
步骤1：同样⾸先安装sass-resources-loader这个插件。
步骤2：在项⽬主⽬录下新建⼀个fig.js配置⽂件。⼤概的配置⾃⾏搜索/戳这⾥/gi
步骤3：测试阶段，和⽅法⼀的步骤3⼀样。
c.⽅法3
如果使⽤的vue-cli的版本是⾼版本的，那么可以直接修改fig.js这个⽂件的chainWebpack这个属性来实现多个scss⽂件的公⽤。步骤1：同样⾸先安装sass-resources-loader这个插件。
步骤2：在项⽬主⽬录下新建⼀个fig.js配置⽂件。⼤概的配置⾃⾏搜索/戳这⾥/gi
步骤3：测试阶段，和⽅法⼀的步骤3⼀样。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持⼩编。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。