Laravel Elixir以错误的顺序组合Sass文件

Question

我在同一目录中有三个Sass文件：_include.scss，app.scss和partials.scss。

app.scss和partials.scss都在第一行导入：

@import "include";

在_include.scss的第一行：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

我的gulpfile.js看起来像这样：

var elixir = require('laravel-elixir');
elixir(function(mix) {
    mix.sass([
        'app.scss',
        'partials.scss'
    ]);
});

Bootstrap和我自己的Sass代码被合并到同一个CSS文件中public/css/app.css)。唯一的问题是Bootstrap的CSS是在app.scss之后插入的，所以我所做的任何更改都将被Bootstrap覆盖，如果它们发生碰撞。partials.scss插在正确的底部。

是什么原因引起的？据我所见，我有其他项目完全相同的设置，没有这个问题。

Answer 1

错误在于加倍@import "include";语句：

  

app.scss和partials.scss都在第一行导入

SASS中存在issue for import once语义，但仍未解决。我建议只在一个地方包含该库，直到问题得到解决。

更新：此主题还有一个informative blog post，可帮助您找到适合您的解决方法。