pages：页面。有的页面可能有特定的样式，与通常的处理方式不同。那么你可以将它放入该文件夹。

themes：主题。如果你的应用中有不同的主题（黑暗模式、管理员等等），那么可以将它们放入该文件夹。

abstracts：抽象。你可以将所有函数和变量与混入（mixin）放在这里。简而言之，就是你所有的帮手。

vendors：外部资源。应用或项目怎么可能没有外部的库呢？你可以将所有不依赖于你的文件都放入该文件夹。例如，你可以放入Font Awesome文件、Bootstrap和其他类似的东西。

主文件
你需要将以上所有内容导入到该文件中。
@import abstracts/variables;@import abstracts/functions;@import base/reset;@import base/typography;@import base/utilities;@import components/button;@import components/form;@import components/user-navigation;@import layout/header;@import layout/footer;...我知道你觉得以上内容有点太多，一时难以接受。这个架构适合于大型项目，而非小项目。下面我们介绍一种更适合小项目的做法。
首先，你不需要 vendors 文件夹。可以将所有外部 CSS 代码放在头部的link标签内。接下来，如果你的应用只有一个主题的话，可以省略 themes 文件夹。最后，你可能不会有大量页面特定的风格，所以也 pages 也没必要。好了，现在只剩下 4 个文件夹了。
然后，你有两个选择：

你可以按照7-1模式组织CSS代码，那么你需要留下abstracts、components、layout 和 base 文件夹。
你想将所有的分块文件和 mail.css 放在一个大文件夹内，那么你会得到如下结构：

sass/_animations.scss_base.scss_buttons.scss_header.scss..._variables.scssmain.scss你可以随便选。
你可能会想：你说服了我！但是我该如何使用呢？我是说，哪些不支持scss文件的浏览器该怎么办呢？说的好！这是我们的最后一步，我们现在就来学习如何将SCSS编译为CSS 。
4. 从 SCSS 到 CSS首先，你需要 Node.js 和 NPM（或 Yarn）。
我们将使用一个名为 node-sass 的包，它可以让我们将 .scss 文件编译为 .css 文件。
它的 CLI（命令行界面）相当容易使用：
node-sass <input> <output> [options]它有多个选择，但我们只使用其中两个：

-w：监视目录或文件。这意味着node-sasswaits在时刻监督你的代码是否发生改动，一旦出现发生，它就会自动编译成CSS 。这在开发时非常有用。
--output-style：CSS文件的输出内容。它的值可以是：嵌套、展开、紧凑、压缩。我们将使用它来构建你的CSS文件。

如果你是一个好奇心很重的人（我希望如此，因为开发人员应该好奇！）那么，请点击这里查看完整的文档。
现在我们知道需要用哪些工具。其余的工作更简单。只需按以下步骤操作：

创建项目：mkdirmy-app && cd my-app
初始化：npm init
添加node-sass库：npm install node-sass --save-dev
创建文件夹， index.html和main.scss文件：

touch index.htmlmkdir -p sass/{abstracts,base,components,layout} csscd sass && touch main.scss

将这些脚本加入到package.json文件中：

{..."scripts": {"watch": "node-sass sass/main.scss css/style.css -w","build": "node-sass sass/main.scss css/style.css --output-style compressed"},...}

将包含编译好的 CSS 文件的连接加入到 index.html 文件的 head 标签内：

<!DOCTYPE html><html lang=”en”> <head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><meta http-equiv=”X-UA-Compatible” content=”ie=edge”><link rel=”stylesheet” href=https://www.isolves.com/it/cxkf/yy/CSS2/2019-08-01/”css/style.css”>My app_江苏龙网

My app

然后就可以了，你准备好了！你可以在编程的时候运行npm run watch ，并在浏览器中打开index.html文件。如果你想缩小CSS ，只需运行npm run build 。
5. 补充添加实时重新加载
你可能希望添加实时重新加载以提高工作效率，而无需手动重新加载本地index.html文件。
你可以按照以下简单的步骤操作：