文档如何引用 SCSS 文件？答案

【问题标题】：How does a document reference an SCSS file?文档如何引用 SCSS 文件？
【发布时间】：2017-12-18 20:29:01
【问题描述】：

请原谅我对 Sass 缺乏经验和理解。

基本上，我被指派在一个网站上进行一些编辑，该网站有一个主 css 页面和几个 scss 子页面，所有这些都通过一个 ftp 目录组织。

我只是对索引如何知道将 ftp 目录中的 scss 页面拉到哪里感到困惑？我查看了索引页面的代码，以及链接的 css 和 js 页面，但找不到任何引用 scss 页面的部分。然而他们仍然在原始的 CSS 中加载？我错过了什么吗？

感谢您的澄清。

【问题讨论】：

主目录下是否有 gulpfile.js 或 grunt 文件？应用程序使用哪种语言？红宝石？
不，没有任何 gulpfile.js 或 grunt 文件。该网站使用 javascript、html 和 css 和 scss
通常对 SCSS、stylus 和其他 css 预处理器进行“编译”或“预处理”，以将它们转换为链接到 index/html 页面的 css 文件.假设他们还在附近，那么设置它的人很有可能会给你更多的指导。

标签： css sass

【解决方案1】：

SCSS 是一种预处理器语言。这意味着它将被转换为 CSS。 SCSS 文件不会被网站加载。相反，您必须对 SCSS 文件进行更改，然后将它们转换为 CSS。很可能有一个系统可以为您解决这个问题。环顾四周，看看是否有 gulpfile 或 gruntfile 在某处闲逛。

main.scss 文件被编译成 main.css 文件。 sass 编译器生成的输出替换了 main.css 文件。没有链接。你需要使用 sass 编译你的 main.scss 文件。

除此之外，您使用“CSS 文件”而不是“CSS 页面”，因为 CSS 是级联样式表的首字母缩写词，它本身绝对不是页面。

【讨论】：

您好，Franz，感谢您的快速回复。如果 SCSS 文件中有诸如 mixins 之类的元素被主 CSS 文件引用，那么如果有意义，CSS 文件如何链接到或在其自身中查找 SCSS 文件？
SCSS 使用常规的@import 语法：sass-lang.com/guide#topic-4。如果没有导入调用，则文件可能会在编译之前连接起来。这里的第一步是找出使用的构建工具。您工作场所的某个人应该知道这一点。
您也可以发布目录结构的截图。也许我可以从中收集到一些东西。
据我所知，该网站的索引页面是从 main.css 中获取的，但我无法终生弄清楚它是如何引用 setup scss 文件中的main.css
包含很可能发生在 main.scss 文件中。你看过那里吗？ grunt/ 或 gulpfile 可能位于 CSS 文件夹的父目录中。

【解决方案2】：

Web 浏览器不知道 SCSS 或 SASS 文件是什么。他们只加载 CSS。

您的网站可以有一个构建工具（grunt、gulp、rake 等）将您的 .scss 源文件编译成 .css 文件，然后发布到您的网站。

有时您的应用程序服务器会知道如何即时进行翻译，您只需编辑.scss 文件即可。

很多时候，许多.scss 文件将合并到一个.css 文件中，因此当您查看浏览器加载的.css 文件时，您经常编辑的文件与预期不同。

【讨论】：