sass 配置与 webpack 加载机作用webpack 环境下使用 sass 。需要提前下载加载机的依赖插件下载下

webpack 环境下使用 sass 。需要提前下载加载机的依赖插件

下载下面的 npm 包，这些插件通过 webpack 运行，与相关配置一起被称为【加载机】
```
npm install style-loader css-loader sass-loader node-sass
```
1. node-sass（开源地址）：sass 预编译最底层的编译器，node 运行此包过程中依赖 ruby 语言（mac 自带，win10 需下载 ruby），注意在项目中，每当我们更换 node 版本或者重新下载 node 后，需要重新下载 node-sass 或者重新编译一次 npm rebuild node-sass，不然会报错。
  
  node-sass 会因为系统环境的问题，难以安装，奇怪报错，且 ruby 编译缓慢等原因不被官方推荐了。从 2020 年开始，sass 官方推荐 dart-sass 包。Node Sass 弃用，以 Dart Sass 代替 - 知乎 (zhihu.com)
  
  注意：dart-sass 这个名称是 github 上开源项目地址名称，实际上不能理所当然的觉得是 npm i -D dart-sass 。因为虽然 dart-sass 名确实为 dart-sass，但也是 sass 官方最开始为了区分 node-sass 来作出的一个命名，而后 node-sass 就已经被完全弃用，因而 dart-sass 也被弃用，统一使用【sass】来作为 dart-sass（真坑）。正确安装 npm i -D sass。
2. sass-loader（开源地址）：用来将 sass/scss 文件编译为 css 文件，它的运行依赖 node-sass 包，并且依赖项目 webpack 版本（crp 脚手架创建的项目的 package.json 文件中看不到，被隐藏了）与全局 node 版本。所以编译 scss 的样式相关报错时，一般为 sass-loader 与 node 或者 webpack 版本问题。通过 npm list 命令能快速列出项目依赖包以及【指出当前冲突错误包是谁】，并且指出正确的依赖版本号（依赖包版本等问题可以通过这个命令快速定位解决），详细冲突我们可以去 github 看相关包的版本发布公告，一般写的很清楚。
3. css-loader（开源地址）：css 文件本来不支持模块化，这个插件可以像 @import 在 css 文件中一样，在 JS 环境中 import..from../require() 来加载 css 文件（注意 ts 中需要自己写类型声明），当成一个模块来解析。并且可以通过配置选项可以开启 CSS Modules 技术
4. style-loader（开源地址）：作用：在项目 build 的时候，将 css 通过 style 标签注入到 index.html 文件中。

webpack 最简单配置：

module.exports = {
    entry: './modules/main.js',
    output: {
        path: __dirname,
        filename: './bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|sass)$/,
                loader: 'style-loader!css-loader!sass-loader',
            },
        ],
    },
}