如何在Chrome Devtools中使SASS编辑工作? [英] How can I make SASS editing work in Chrome Devtools?

问题描述

我只关注此tutplus教程用于源地图sass.

I just follow this tutplus tutorial for source map sass.

我无法在chrome的检查元素下的实验标签中找到对sass的支持选项.它被删除了吗?我要迟到使用此功能了吗?

I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?

我的sass版本是3.3.8(Maptastic Maple)

My sass version is 3.3.8 (Maptastic Maple)

如何在Chrome Devtools中使SASS编辑工作?

How can I make SASS editing work in Chrome Devtools?

推荐答案

我成功了. SASS支持不再是一个实验:它现在是一个标准. 我只是按照简单的步骤操作即可.

I made it work. SASS support is no longer an experiment: It's now a standard. I just follow simple steps to make it work.

1)在chrome上打开检查元素，然后点击右上角的齿轮图标.

1) Open your inspect element on chrome and click on gear icon which appears to the top right.

2)启用 CSS源代码映射(我认为默认情况下已启用它.如果不进行检查，请启用CSS源映射后不要关闭它.)

2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)

3)单击常规"标签正下方左侧面板上的"<工作区" 标签.

3) Click on Workspace tab on the left panel just below the General tab.

4)通过单击添加文件夹按钮添加源代码文件夹(关闭框).

4) Add your source code folder by clicking the Add folder button (close the box.)

5)进入 Sources 标签，找到您的scss文件.

5) Go on Sources tab and find your scss file.

现在，您可以进行更改并按ctrl + s，它将在style.scss上自动更改.

Now you can make changes and hit ctrl+s it will automatically change on your style.scss.

这篇关于如何在Chrome Devtools中使SASS编辑工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！