Sass,Less,Css之间共享变量（挺长时间了，比较稳定就来记录下）

为什么要记录这个呢 ，就是因为本人接到一个要切换主题的工作，我简单介绍下，移动端项目，vue+vant+less 

这个原理我也是看个大神的 照着搬过来吧：通过 webpack 和 css module，我们可以在 js 中使用样式 Sass,Less,Css 文件中定义的变量。

下面上我的文件目录

1 是我把一些自己整理的公告组件的所有样式 文件

2 是全局样式的入口 管理，这里面我写了点常用的常用的公共样式，我觉得挺方便

3 就是重点了  就是在你的要使用这个变量的父页面引入这个文件 如图

4 就是 移动端所有样式抽离文件，这个文件我目前就提出来2个  一个是图片的切换  一个是主题颜色的切换（目前来说够用了）

 之后怎么使用呢？

next  本人是在app.vue文件  created  mounted 中写了一些逻辑  

 

1 是 在这个页面 引入store 引入index.js文件  在初始化中 写入variables: { ...variables },

2 将这个对象放到store 中

3 就是切换主题的逻辑

接下来都基本ok了 在你想用的页面中 如何用才能取到咱们的  name呢？只需要在你的页面中引入store  直接就可以看到了