gpt4 book ai didi

css - 如何使用自动前缀和缩小为 sass 文件生成正确的源映射

转载 作者:行者123 更新时间:2023-11-27 23:58:33 27 4
gpt4 key购买 nike

我正在尝试配置 gulp 以将 SASS (*.scss) 文件转换为 CSS、autoprefix,并且还想为编译后的 CSS 文件生成源映射文件。我正在尝试创建两个 css 文件,一个是普通版本,另一个是缩小版本。这两个 CSS 文件都需要有 sourcemaps。我有以下 gulp 配置文件,但是由此生成的源映射不正确。当我在没有 autoprefixer 的情况下运行 gulp 任务时,一切都很好,但是使用 autoprefixer 时,sourcemaps 被搞砸了,即在 chorme 开发工具中打开时它指向不正确的行号。

我尝试了多种配置,例如内联源映射和单独的源映射。我什至尝试在自动前缀之前加载源映射,然后在自动前缀完成后将其写入文件。

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const clone = require('gulp-clone');
const merge = require('merge-stream');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const sassUnicode = require('gulp-sass-unicode');

const prefix = require('autoprefixer');
const minify = require('cssnano');

const {paths} = require('./config.js');

/*
* Node Sass will be used by defualt, but it is set explicitly here for -
* forwards-compatibility in case the default ever changes
*/
sass.compiler = require('node-sass');

sass_options = {
// outputStyle: 'compressed',
outputStyle: 'compact',
// outputStyle: 'nested',
// outputStyle: 'expanded'
sourceComments: false,
precision: 10
};

prefix_options = {
browsers: ['last 2 versions', '> 5%', 'Firefox ESR'],
cascade: false
};

minify_options = {
discardComments: {
removeAll: true
}
}

// Process, compile, lint and minify Sass files
const buildStyles = function (done) {
var source = src(paths.styles.input)
.pipe(sourcemaps.init())
.pipe(sass(sass_options).on('error', sass.logError))
// .pipe(sassUnicode())
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(postcss([prefix(prefix_options)]));

// Create non-minified css file and its sourcemaps
var pipe1 = source.pipe(clone())
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.styles.output));

// Create minified css file and its sourcemaps
var pipe2 = source.pipe(clone())
.pipe(rename({ suffix: '.min' }))
.pipe(postcss([minify(minify_options)]))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.styles.output));

return merge(pipe1, pipe2);
};

我希望即使在自动前缀之后也能得到正确的源映射,但是在当前设置下我得到的行号不正确。 (对于源 .scss 文件中嵌套元素中子元素的所有样式,sourcemap 指向根元素)。

例如,在下面的示例中,当我检查 h2 元素时,sourcemaps 指向根元素 .shopping-cart(第 445 行)而不是(第 459 行)

enter image description here

最佳答案

buildStyles -> source 中两次调用 sourcemaps.init 是否有原因?

sourcemaps.init 应该在 sourcemaps.write 之前。在您的代码中,对于 sourceinbuildFiles`,您采用了相反的方式。

老实说,对我来说,您的构建看起来比需要的更复杂,这会导致问题。

See docs for reference


此外,如果您有源 map ,为什么还需要非缩小代码?

关于css - 如何使用自动前缀和缩小为 sass 文件生成正确的源映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56120999/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com