面试题：Webpack处理LESS和SASS样式表时配置的异同点是什么？

Question

分别阐述Webpack配置处理LESS和SASS样式表时，所用到的loader、依赖以及关键配置项的相同之处和不同之处，并说明原因。

Answer 1

相同之处

1. Loader 使用：都需要使用 style-loader 和 css-loader。style-loader 负责将 CSS 插入到 DOM 中，css-loader 负责处理 CSS 中的 @import 和 url() 等引用。
2. 依赖管理：都需要在项目中通过 npm 或 yarn 安装相关的 loader 和依赖包，确保 Webpack 能够识别和处理样式文件。
3. 关键配置项结构：在 Webpack 的 module.rules 配置中，两者的配置结构类似，都以对象形式定义针对特定文件后缀的处理规则。

不同之处

1. 处理样式的 loader：
   • LESS：需要 less-loader 和 less。less-loader 用于将 LESS 转换为 CSS，less 是 LESS 解析器。
   • SASS：对于 SASS（.scss）需要 sass-loader 和 node - sass（或 dart - sass）。sass-loader 负责将 SASS 转换为 CSS，node - sass 或 dart - sass 是 SASS 的解析器。
2. 配置细节：
   • LESS：在 module.rules 中针对 .less 文件配置时，use 数组中 less-loader 放在 css-loader 之后，例如：

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

• SASS：针对 .scss 文件配置时，use 数组中 sass-loader 放在 css-loader 之后，例如：

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

3. 语法差异：LESS 和 SASS 语法不同，LESS 类似 CSS 且更简洁，SASS 有两种语法（缩进式和 SCSS 块式），这些语法差异导致需要不同的解析器（less 与 node - sass/dart - sass）来处理，进而使得在 loader 和相关依赖使用上有区别。