插件目录中的 SCSS 和 CSS 文件？答案

【问题标题】：Both SCSS and CSS files in plugin directory?插件目录中的 SCSS 和 CSS 文件？
【发布时间】：2017-03-18 18:22:30
【问题描述】：

如果这很幼稚，请原谅我，但我习惯于只使用 CSS。 Sass 看起来很酷，我正在学习它，但由于某种原因，我下载的许多 Javascript 或 jQuery 插件都有与样式表关联的 CSS 和 SCSS 文件。我不想编辑两个文件才能在页面上获得结果，为什么除了几个关键区域之外它们看起来像副本时两者都存在？见下图，似乎每个 SCSS 都有一个额外的 CSS 文件。是不是因为有些浏览器不能编译SCSS？

CSS and SCSS in same directory

【问题讨论】：

标签： css sass

【解决方案1】：

没有浏览器（至少是主流浏览器）能够直接使用 SASS（或 LESS）。您总是需要先将 scss 文件编译为 css，然后才能使用它们。

您可以通过 grunt 或 gulp 等构建工具编译 css。您甚至可以将其配置为查看 scss 文件中的更新，并在有任何更改时重新编译 css。

构建后你可以有以下类型的文件：

style.scss <- this is source file    
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified 
style.css.map <- this is source map of scss file

Here 你可以阅读为什么 css 文件会被缩小。 Here 您可以阅读源映射的用途。

【讨论】：

所以 CSS 文件存在是因为 SCSS 文件编译为 CSS？

【解决方案2】：

是不是因为某些浏览器无法编译 SCSS？

是的。有一个命令行实用程序可以将.scss 转换为.css。可能.map 文件是理解它的浏览器检查器的反向转换辅助工具。

每当我生成文件（如.min.js，或者在您的情况下来自.scss 的.css）时，我都会确保在我的构建脚本中自动执行适当的命令行转换工具.

我不确定您使用的是哪种构建系统，但需要执行一些用于转换的命令行工具。

您不需要手动更新这两种格式。 SCSS 到 CSS 命令行转换器早在任何浏览器（现在有吗？）开始支持 SCSS 之前就已经存在。

【讨论】：