Rails 关于 sprockets 中的 require 和 scss 中 @import 的一些疑问。

bydmm · 2014年04月21日 · 最后由 bluesky0318 回复于 2019年07月09日 · 4311 次阅读

在rails中用sprockets的require做css连接合并压缩是肯定没有问题了,但是解决不了共享SCSS中mixin的问题。 用sprockets的require的话,前端代码的结构就容易变的混乱,并且要用到共享的mixin的话,所有scss文件的前面都要@import "common/mixin"。

我听说scss的@import其实可以替代sprockets的require, 因为scss的@import可以把多个文件连接起来变成一个文件,就如同require一样。

但是我所知的CSS中的@import操作实际上是在客户端游览器要重新请求一次文件, 和require的连接压缩完全不同。

我想知道require和scss的@import到底是一个什么情况。

大家是什么前端架构, 是怎么组织以及怎么合并CSS代码的。

共收到 10 条回复

CSS 的 import 是 CSS 的 import,SCSS 的 import 是 SCSS 的 import。

#2楼 @Rei 看来SCSS的@import显然可以实现require的功能, 只是@import不能require_directory这么用。

#3楼 @bydmm 试一试?

This feature will never be part of Sass. One major reason is import order. In CSS, the files imported last can override the styles stated before. If you import a directory, how can you determine import order? There's no way that doesn't introduce some new level of complexity. By keeping a list of imports (as you did in your example), you're being explicit with import order. This is essential if you want to be able to confidently override styles that are defined in another file or write mixins in one file and use them in another.

#4楼 @Rei http://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import or https://github.com/haml/haml/issues/97 似乎SCSS官方不太喜欢这个功能。 因为官方认为一次引用一个目录会让用户无法控制引用的顺序。

require 和 @import 一起用.... 按模块划分的css用require,比如

topic.scss
reply.scss

功能性的在application.scss用 @import 引入,比如

_reset.scss
_share.scss
_button.scss

因为相同层级的css与加载顺序有关,后面的会覆盖前面的,像reset这样的个人比较喜欢用 @import 手动加进去

原来@import引入文件有时件也有顺序上的要求

  • sprockets require 是拼接编译后的文件
  • sass @import 是拼接源文件之后再整体编译

按需使用吧

#3楼 @bydmm sass 可以 require_directory,有个插件叫做 sass-glob ?好像是这个名字,搜一下。

至于文件顺序问题,自己把握。

import scss文件,测试了一下,有效果。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册