第一次使用vue写项目，但是不知道vue-cli的项目如何与后台进行对接，希望大家能多多指教。

顺晟科技：

我再无耻的推广一下我的项目：

GitHub

a boilerplate for large vue project with ElementUI 2.x - JasonBai007/vue-seed

并不能。注意我说的，「同一作用域」，这个作用域可以是文件，也可以是 <style> 标签。你在 app.vue 中 import 了它，就只能在 app.vue 中的那个 <style> 标签内使用那些变量。

也能达到共享的目的

最近接触的东西比较多，像npm，vue，webpack，git，sass等，感觉没有一个系统把他们联系起来脑子有点乱

如果你只是需要应用这个样式文件里的样式，main.js 或者 app.vue 里 import 它即可。

npm run build 就能直接将vue进行打包吗，然后直接就可以把打包好的dist文件夹放在服务器上就可以访问了吗？

也就是说咋main.js中导入公共的样式表是可以全局使用的，但是如果样式表中包含了变量和函数之类的就必须通过sass-resources-loader来进行处理了，处理完成之后才能使用

sass-resources-loader 的作用即是，自动在每个样式文件里加上 @import，其实就是省了你自己手动引入的工夫。

哦哦，因为组件中我的这样设置了，所以可以在每个组件中使用scss中的@import导入其他scss文件，并且能够解析，如果我直接在main.js中导入scss文件，他就只能被当作css文件解析，所以里面的css规则能够正常使用，但是变量和函数之类不属于css规则的则被忽略掉了，通过sass-resources-loader来给每个组件添加scss文件，而组件是能够解析scss文件的；那我想到了，可以直接在app.vue中

「万变不离其宗」，所谓「把它们联系起来的系统」就是 html + js + css (+ etc.) => App 的过程，Vue 也好 Webpack 也好都不过是用于其中不同环节的工具。这个过程从前端开发出现时就存在，明白这个过程就不会乱了。

另外，这个问题已经脱离这个帖子原来的主题了，建议另开新帖讨论。

工作中学习前端已经7个月了，感觉到了一个阶段，很多东西需要 学习，感觉有点累，不知道您是怎么走过来的呢？

所以啊，import 只负责应用样式规则，变量之类的东西需要外部工具处理一下，比如我上面说的 sass-resources-loader。

Webpack 依赖于 Node 生态，而 Node 生态建立在包 (Package) 的概念之上，npm 就是操作这些包的工具。

如果你希望在全局共用里面的变量、函数什么的，看看 sass-resources-loader。

之前一直是单个组件的样式使用，以及使用@import导入相关的scss文件

import 进来的样式文件会被 Webpack 转换为 css 文件或 <style> 标签（取决于你的 Webpack 配置）。如果样式文件不是标准 CSS，则会被对应的 loader 转换为标准 CSS。在这个过程中那些标准 CSS 不支持的东西（比如变量）会被移除。

明白了这些名词实际上是什么，分别对应了「开发」这件事的哪个部分，你就不容易迷茫了。

Vue 是为了降低 Web App 的开发/维护难度而诞生的，它增强了编写 HTML 和 JS 这一环节的体验；Sass 是为了解决标准 CSS 写起来不趁手而诞生的，它增强了书写 CSS 这一环节的体验；Webpack 是为了整合前端代码打包处理步骤而诞生的，它增强了 => 这一环节的体验。

首先要摆正心态，不要抵触新事物，也不要抵触学习。新事物让你看得更远，学习让你站得更高。

其次要理解本质，或者说总结规律。两仪生四象，有些东西其实是不变的。

在main.js中导入了common.scss文件，在其他组件中使用了common.scss中的变量，但是报错，显示没有找到该变量

推荐你去B站看一个叫小马视频的up主，vue的进阶教程

vue如何设置全局的scss文件呢？该如何使用这个全局scss文件？

代码开发多了就会面临软件工程上的代码管理问题，git 则是代码版本控制系统的流行工具之一。

当然我本人兴趣在此，所以走起来可能会比较轻松。

这个事情上你要明白的是，Scss 中的变量只是方便同一作用域下样式规则的书写，它是 Scss 内部的机制，所以一旦脱离这个作用域就不能发挥作用（比如不再是 Scss 文件，比如不在同一个文件——如果你不手动引入的话）。