sass中的sourcemaps是干什么用的
1个回答
展开全部
首先,从名字可以看出sourcemaps是生成文件到源文件的一个映射,也就是sourcemaps记录了生成文件中的每一条语句在源文件中的对应位置。以gulp编译sass为例(假设你对gulp已经有了一定了解):
1. 先安装gulp-sourcemaps,命令为:npm install --save-dev gulp-sourcemaps
2. 在gulpfile.js中引用它:sourcemap = require( 'gulp-sourcemaps' )
3. 建立一个任务
gulp.task( 'sass', function() {
return gulp.src( ['./src/css/index.scss'] ) //后缀为scss
.pipe( sourcemap.init() ) //初始化
.pipe( sass({outputStyle: 'compressed'}) )
.pipe( sourcemap.write( './maps' ) ) //生成sourcemap文件,路径为./maps
.pipe( gulp.dest( './des/dist/' ) )
} );
这样在命令行中运行该任务:gulp sass,就可以生成sourcemaps文件了
在html中引入生成的css文件,谷歌浏览器打开该html文件,我们就能够看到下图。
标红的部分可以看到对应的样式文件是scss,点击进入就能够找到这个样式对应在scss文件中的位置了。
调试起来就方便啦!
1. 先安装gulp-sourcemaps,命令为:npm install --save-dev gulp-sourcemaps
2. 在gulpfile.js中引用它:sourcemap = require( 'gulp-sourcemaps' )
3. 建立一个任务
gulp.task( 'sass', function() {
return gulp.src( ['./src/css/index.scss'] ) //后缀为scss
.pipe( sourcemap.init() ) //初始化
.pipe( sass({outputStyle: 'compressed'}) )
.pipe( sourcemap.write( './maps' ) ) //生成sourcemap文件,路径为./maps
.pipe( gulp.dest( './des/dist/' ) )
} );
这样在命令行中运行该任务:gulp sass,就可以生成sourcemaps文件了
在html中引入生成的css文件,谷歌浏览器打开该html文件,我们就能够看到下图。
标红的部分可以看到对应的样式文件是scss,点击进入就能够找到这个样式对应在scss文件中的位置了。
调试起来就方便啦!
Storm代理
2023-07-25 广告
2023-07-25 广告
StormProxies是一家可靠的代理服务提供商,提供原生IP(住宅原生IP)和高匿名代理服务。以下是关于StormProxies的原生IP服务的一些信息:1. 住宅原生IP:StormProxies提供的住宅原生IP是指从真实的家庭或企...
点击进入详情页
本回答由Storm代理提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询