Gulp Elixir:错误 CSS SourceMap 在 2 个任务之后:SASS 编译和合并样式表
Gulp Elixir: Wrong CSS SourceMap After 2 Tasks: SASS Compile and Combine Stylesheets
我有多个 sass 文件(一个 style.scss 包含所有包含)和几个 css 库,我想将它们合并到一个最终 style.min.css .
我用 elixir 配置了 2 个任务:
- 编译我的 sass 文件:'style.scss'(包含所有包含)到 css:'public/css/style.css'
- 将已编译的 css: 'public/css/style.css' 与其他合并
样式表(库)进入决赛:'public/css/style.min.css'
这是我的 gulpfile:
elixir(function(mix) {
mix
.sass('style.scss', 'public/css/style.css')
.styles([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
], 'public/css/style.min.css')
});
问题:sass 编译任务创建了正确的源映射,指向 .s 中的正确行css,但是 结合样式的第二个任务创建了源映射指向 'public/css/style.css' 中的行,而不是 .scss 文件中的行:(
有人知道如何强制最终源映射指向 sass 文件中的行吗?
终于,时隔3个月,我找到了解决办法!
我没有同时调用 - mix.sass 来编译 SASS,然后调用 mix.styles 来组合 css 样式表,我只是将所有内容都包含在 mix.sass 中
elixir(function(mix) {
mix.sass([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
'style.scss'
], 'public/css/style.css')
});
此技巧修复了源映射问题。
我有多个 sass 文件(一个 style.scss 包含所有包含)和几个 css 库,我想将它们合并到一个最终 style.min.css .
我用 elixir 配置了 2 个任务:
- 编译我的 sass 文件:'style.scss'(包含所有包含)到 css:'public/css/style.css'
- 将已编译的 css: 'public/css/style.css' 与其他合并 样式表(库)进入决赛:'public/css/style.min.css' 这是我的 gulpfile:
elixir(function(mix) {
mix
.sass('style.scss', 'public/css/style.css')
.styles([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
], 'public/css/style.min.css')
});
问题:sass 编译任务创建了正确的源映射,指向 .s 中的正确行css,但是 结合样式的第二个任务创建了源映射指向 'public/css/style.css' 中的行,而不是 .scss 文件中的行:(
有人知道如何强制最终源映射指向 sass 文件中的行吗?
终于,时隔3个月,我找到了解决办法!
我没有同时调用 - mix.sass 来编译 SASS,然后调用 mix.styles 来组合 css 样式表,我只是将所有内容都包含在 mix.sass 中
elixir(function(mix) {
mix.sass([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
'style.scss'
], 'public/css/style.css')
});
此技巧修复了源映射问题。