无法编译bootstrap代码

zxkane commented 8 years ago

同样的代码，用grunt-sass就可以编译。

[ERROR] parser.node-sass: argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
    ../../../../../../bower_components/bootstrap/scss/_variables.scss:78, in function `darken`
    ../../../../../../bower_components/bootstrap/scss/_variables.scss:78 [`/bower_components/bootstrap/scss/_variables.scss`

fis-config.js

fis.match('*.scss', {
    rExt : '.css',
    parser : fis.plugin('node-sass', {
    // options...
    })
});

app.scss

@import "../../bower_components/bootstrap/scss/_mixins.scss";
@import "../../bower_components/bootstrap/scss/_variables.scss";

2betop commented 8 years ago

是最新版本吗？升级试试。

zxkane commented 8 years ago

是最新版本。刚刚才安装的。

package.json

     "fis3": "^3.3.0",
     "fis-parser-node-sass": "latest",
     "fis3-postpackager-loader": "latest"
   },

2betop commented 8 years ago

麻烦再check 一下，确定是 0.1.8 的版本，如果是，请提供一个简单能复现的功能，我去解决这个问题。

zxkane commented 8 years ago

是最新的fis3-node-sass了。

创建了一个简单project来重现这个问题。

2betop commented 8 years ago

no, no, 你本机装了 fis3 版本的？如果装了，得卸载，那个不是我们官方开发的。

注意别装 fis3-parser-node-sass 应该装 fis-parser-node-sass。如果装了 fis3-parser-node-sass 会优先使用这个，所以需要卸载。

zxkane commented 8 years ago

我安装的fis3不是官方的？

项目用到的fis3和sass的插件都满足你的要求阿。

https://github.com/zxkane/fis3-node-sass-bug/blob/master/package.json

2betop commented 8 years ago

我是说 fis3-parser-node-sass 不是官方的，我看你那个项目用的版本是对的，我一会试试。

zxkane commented 8 years ago

之前的错误是由于variable.scss import 顺序不正确导致的。新的demo code中已经解决了。

最新的错误是

[ERROR] parser.node-sass: Undefined variable: "$html-bg".

类似 issue #4 。

同时增加了grunt脚本，grunt-sass能正确编译。

2betop commented 8 years ago

我看下 bs.base.scss 文件，根本就没有 import "variables" 怎么能直接用那个变量？改成以下代码就把问题解决了。

@import "variables";

html {
  background-color: $html-bg;
}

grunt-sass 能编译估计是因为你指定了编译顺序吧。你控制了让 vaiables.scss 文件在前面先编译? 在fis里面是按文件字母顺序编译的，当他独立编译 bs.base.scss 的时候，由于 varibales.scss 没有引入资源会报错。

sass 里面有个规范，就是那些不独立参与编译的文件都是 _ 打头，你会看到很多 mixins 相关的， variables 相关的文件，都是 _mixins.scss 和 _variables.scss。在 fis 项目中我也建议这么做。这样的话，可以允许部分 scss 在不 import 其他文件的前提下用其他文件定义的东西，只要你的入口 scss 文件，是在 import 其之前，把其需要的东西先 import .

zxkane commented 8 years ago

我并不需要单独编译 bs.base.scss, 我需要的是编译app.scss, 它加入了必要的引用。

@import "../../bower_components/bootstrap/scss/_mixins.scss";
@import "../../bower_components/bootstrap/scss/_variables.scss";
@import "variables.scss";
@import "bs.base.scss";

把fis-config.js里面设置为只编译app.scss，问题解决了。

fis.match('app.scss', {
    rExt : '.css',
    parser : fis.plugin('node-sass', {
    // options...
    })
}).match('app.scss', {
    packTo : '/assets/styles/app.css'
});

多谢你的建议。

fex-team / fis-parser-node-sass

无法编译bootstrap代码 #6