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

Question

我正在尝试配置 gulp 以将 SASS (*.scss) 文件转换为 CSS、自动前缀，并且还想为已编译的 CSS 文件生成源映射文件。我正在尝试创建两个 css 文件，一个是普通版本，另一个是缩小版本。这两个 CSS 文件都需要有源映射。我有以下 gulp 配置文件，但是由此生成的源映射不正确。当我在没有 autoprefixer 的情况下运行 gulp 任务时，一切都很好，但是使用 autoprefixer 时，源映射被搞砸了，即在 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 文件中嵌套元素中子元素的所有样式，源映射指向根元素）。

例如，在下面的示例中，当我检查 h2 元素时，源映射指向根元素 .shopping-cart (line#445) 而不是 (line#459)

enter image description here

Answer 1

在buildStyles -> source 内两次调用sourcemaps.init 有什么原因吗？

sourcemaps.init 应该在 sourcemaps.write. In your code, you have it the other way around forsourceinbuildFiles` 之前。

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

See docs for reference

---

另外，如果你有源图，为什么还需要非缩小代码？