sass @import 路径问题

Question

less 中这么写是OK的

@bootstrap:"../../../bootstrap/";
// Core variables and mixins
@import "@{bootstrap}variables.less";
@import "@{bootstrap}mixins.less";

// Reset
@import "@{bootstrap}normalize.less";
@import "@{bootstrap}print.less";

但是在sass 中这么写不行

$bootsrap-path: "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/";

// Core variables and mixins
@import "{ $bootsrap-path }bootstrap/variables";
@import "{ $bootsrap-path }bootstrap/mixins";

sass 不太熟 求-> 。

Answer 1

你可以给 Sass 加一个 load_path ，内容就是 bower_components/bootstrap-sass-official/vendor/assets/stylesheets/

然后你就可以直接 @import "bootstra/variables" 了

Grunt

grunt.initConfig({
  sass: {
    dist: {
      options: {
        loadPath: ['bower_components/bootstrap-sass-official/vendor/assets/stylesheets/']
      },
      files: {...}
    }
  }
});

Gulp

.pipe(gulp_sass({
  loadPath: 'bower_components/gangnam/sass/'
}))

Answer 2

你用什么工具，用npm是吧，我用npm经常失败，怎么解决这样的问题.....?

Answer 3

可以这么写 @import url("#{$variable}/bootstrap/scss/variables");