sass项目中的modules出口

一个组件的sass里面,不应该直接引用某个第三方vendor来进行继承,因为当sass compile的时候,会把第三方继承过来的code全部编译过来,导致你的组件编译后的css里面有大量第三方vendor的样式。正确的做法是当你要继承的时候,仅引入第三方的module文件,比如:

@import "~bootstrap-sass/.../_colors.scss";

因为一般的sass项目都会将单独的变量、函数等放在单独的文件中,而这些文件里因为没有实际的样式规则代码,所以在编译之后,它们实际上不会产生最终的css样式。

而如果你在写一个sass项目的时候,也应该遵循这种原则,如果你的组件的sass打算给其他组件去继承,也应该提供一个这样的modules的出口,这样别人只需要继承你的这个modules的出口文件,而不是你的样式出口文件。

2017-05-13 13:58:33

已有1条评论
  1. […] 我今早写了一个Note,就是讲解决这个问题的思路。简单的说就是,不能直接@import "module",而是应该import一个具体的入口scss文件,而这个scss文件只提供变量、函数等的出口,而不产生实际的css规则。这样,当你import这个入口scss文件之后,虽然编译实际上还是会引用这个scss,但是编译的结果中没有任何module的css输出,因为你只是引入了当前你的项目文件中需要的一些scss全局变量之类的。 […]