观看 SCSS 到 CSS

什么是 SCSS？

SCSS 全称为 Sass（Syntactically Awesome Style Sheets）CSS 的扩展语言，是 CSS 预处理器的一种。

SCSS 可以让我们使用变量、嵌套规则、Mixin、函数等等高级特性来书写 CSS 代码，然后再将 SCSS 文件转换成标准的 CSS 文件。

使用 Sass 工具观看 SCSS 到 CSS

Sass 提供了多种工具将 SCSS 文件转换为 CSS 文件，其中最常用的是 Sass 命令行工具。

首先你需要安装 Node.js，然后再全局安装 Sass 命令行工具：

npm install -g sass

安装完成后，你就可以使用 Sass 命令行工具观看 SCSS 到 CSS 了。

使用 sass 命令观看单个 SCSS 文件到 CSS 文件：

sass input.scss output.css

使用 sass 命令观看一个文件夹里所有 SCSS 文件到 CSS 文件：

sass input-folder:output-folder

使用 Webpack 观看 SCSS 到 CSS

如果你正在使用 Webpack 构建你的项目，那么你可以使用 sass-loader 来观看 SCSS 到 CSS。

首先你需要安装 sass-loader 和 node-sass：

npm install sass-loader node-sass --save-dev

然后在 Webpack 配置文件中添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
};

结论

不论是使用 Sass 命令行工具还是 Webpack，都可以方便地观看 SCSS 到 CSS。建议在项目中使用 SCSS，以提高代码的可读性、可维护性和可重用性。