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任务

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
}

所有资产都由 Bower 在 assets 文件夹中管理。对此有任何想法或提示吗？

Answer 1

可能有几个原因。一是该文件不在您认为与 gulpfile 相关的位置。我刚刚在本地重现了这个问题，除非我有一个正确的 includePaths 它没有用。

不正确：(stylesheet.scss)

当我更正它时，文件导入没有任何问题：

例如

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

您确定 gulpfile 正在正确读取该路径吗？

如果您 100% 正确地认为 url 没问题，那么您需要重新访问您的 sass 文件 - 其中包含部分 - 我注意到您没有有分号 - 在每次导入结束时确实需要分号。把它们放进去然后你的代码应该没问题

没有分号 - 任务失败

带分号 - 构建任务就好了：

Answer 2

如果您忘记在 @import "xyz";

后添加 分号； 也会发生这种情况

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

bootstrap-sass + gulp: Media query expression must begin with '('

sass

twitter-bootstrap

gulp

gulp-sass

gulp任务

style.scss: