我有一个可扩展的项目,用 gulp 编译我所有的自动化前端文件(css、js、scss)。
由于生成的 css.map,连接 .scss 文件并生成一个 .css 文件以跟踪其 .scss 文件中每个元素的属性的任务对我来说正常工作,直到我没有知道,在 css.map 文件中,从给定文件中,破坏了其余 .scss 文件的跟踪链。'
问题是有显示网格类,正是“grid-template-areas”,这会导致我的 css.map 文件在引入该类后立即中断。
我的项目的 css.map 跟踪示例,类为“grid-template-areas”:
sources ": [" variables / _tipografia.scss "," variables / _coockie.scss "," variables / _caracteristicas.scss "," style.css "]
(就在文件 _caracteristicas.scss 中我有这个类)
没有类“grid-template-areas”的我的项目的 css.map 抓取示例:
sources ": [" variables / _tipografia.scss "," variables / _coockie.scss "," variables / _caracteristicas.scss "," variables / _mixin.scss "," variables / _extend.scss "," variables / _variables.scss "," variables / _layaout.scss "," variables / _col-row.scss "," variables / _plugins.scss "," variables / _home.scss "," variables / _tarifas.scss "," variables / _testimonios.scss "," variables / _page-info.scss "," variables / _compra.scss "," variables / _forms.scss "," variables / _blog.scss "," variables / _fundae.scss "," variables / _aos.scss "," variables / _landing.scss "," variables / owl / _core.scss "," variables / owl / _animate.scss "," variables / owl / _autoheight.scss "," variables / owl / _lazyload.scss ", "variables / owl / _video.scss", "variables / _quienes.scss", "variables / _new_desarrollo.scss", "style.css"]
在网上转了一千次,我只找到了使用 autoprefixer gulp 的可能解决方案,但没有一个对我有用。
任何人都知道源映射不喜欢这样的基于网格的类并破坏跟踪链的问题是什么?
Éstas son misdependencias de mi gulpfile:
const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uglifyJS = require("gulp-uglify");
const concat = require("gulp-concat");
const rename = require("gulp-rename");
const cleanCSS = require("gulp-clean-css");
const autoprefixer = require("gulp-autoprefixer");
Y está es mi tarea de compilar mis archivos .scss:
function styles() {
return gulp
.src(paths.styles.src)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(paths.styles.dest))
}
非常感谢。