我应该在哪里使用css-preprocessors以及样式作用域？

Question

Vue.js支持使用css指令封装.vue到<style scoped>个文件。我无法理解我应该在哪里使用它，以及最好使用像stylus这样的css预处理器。

我的想法应该是site.css全局样式和每个.vue文件都应该有自己的样式（比如元素颜色和其他小东西）。我是对的吗？

Answer 1

这不是“或者/或”。您不必选择，这两个功能可以做不同的事情，可以合并。

像SCSS这样的预处理器可以让您使用其他语法功能（如变量）编写CSS。这使得编写CSS更容易。但最终，你得到了普通的CSS，并且选择器规则与你编写的名称相同。

范围功能做了一些非常不同的事情：它采用CSS（预处理器之后的处理它）并为所有规则添加一个唯一的属性选择器模板中所有元素的属性。这使得此CSS对此组件中的元素仅 。

为什么这有用？因为它可以防止不必要的副作用。 ＆gt;你可以在你的（S）CSS中编写像“header”这样的简单类名，而不必担心这可能，其他一些组件也将这个类名用于不同的东西，并且样式规则可能会发生冲突并相互覆盖。 scoped无法实现这一点。

此处有关该功能的更多信息：

http://vue-loader.vuejs.org/en/features/scoped-css.html

Answer 2

你走在正确的道路上。这里没有正确的答案。我倾向于创建base.styl或base.scss，然后我会在app.vue中导入。我个人不使用scoped，而是使用模块化css方法来处理vue组件文件中特定的样式。即.componentname作为您的根类，然后根据smacss或bem方法编写样式。

我建议您在应用的所有组件中保持与同一个css预处理器的一致性。