bootstrap-sass + gulp:媒体查询表达式必须以'(''开头

Question

我在这里遇到了bootstrap-sass的问题.我正在尝试通过Gulp和我的style.scss文件中的一些其他scss库编译bootstrap ,但它会抛出这个错误:

Message:
    css/dev/style.scss
Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^

Details:
    formatted: Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^

    column: 28
    line: 1
    file: /home/nano/Sandbox/bolt-seed/theme/own-theme/css/dev/style.scss
    status: 1
    messageFormatted: css/dev/style.scss
Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^
messageOriginal: media query expression must begin with '(' relativePath: css/dev/style.scss

我只是_variables.scss在我的根样式文件夹上复制(现在没有更改),我收到错误.如果我breakpoint-slicer在我的导入中包含相同内容.

这是我的gulp任务和我的 style.scss

吞咽任务

gulp.task('sass-build', () => {
  return gulp.src('./css/dev/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        './assets/bootstrap-sass/assets',
        './assets/breakpoint-slicer/stylesheets',
      ],
      outputStyle: 'compressed'
    }))
    .pipe(sourcemaps.write('./css'))
    .pipe(gulp.dest('./css'));
});

style.scss:

@import 'breakpoint-slicer'

@import 'variables'
@import 'bootstrap'

body {
  padding: 50px
}

所有资产都由assets文件夹中的Bower管理.有什么想法,或暗示这个？

Answer 1

原因可能不多.一个是文件不在你认为与gulpfile相关的位置.我刚刚在本地重新创建了这个问题,除非我有正确的问题,否则includePaths它无法正常工作.

不正确:(stylesheet.scss)

当我更正它时,导入的文件没有任何问题:

例如

.pipe(sass({
    outputStyle: 'nested',
    includePaths: [
        './bower_components/breakpoint-slicer/stylesheets'
    ]
}))

你确定gulpfile正确读取该路径吗？

如果你是100%正确的url是正确的,那么你需要重新访问你的sass文件 - 你包括部分 - 我注意到你没有分号 - 每次导入结束时确实需要它们.把它们放进去然后你的代码应该没问题

没有分号 - 任务失败

用分号 - 任务建设就好了:

Answer 2

如果您忘记添加分号，也会发生这种情况；经过一个@import "xyz";