面试题：Webpack中如何配置Sass预处理器

Question

请描述在Webpack项目中配置Sass预处理器的基本步骤，包括安装相关loader及在webpack.config.js中的配置，假设项目还使用了CSS Modules。

Answer 1

1. 安装相关loader：
   • 安装sass - loader，它用于将Sass代码转换为CSS代码，在项目根目录下运行npm install sass - loader --save - dev。
   • 安装node - sass，它是Sass的Node.js实现，运行npm install node - sass --save - dev。
   • 安装css - loader，用于处理CSS模块相关的加载，运行npm install css - loader --save - dev。
   • 安装style - loader，它将CSS通过<style>标签插入到DOM中，运行npm install style - loader --save - dev。
2. 在webpack.config.js中的配置： 在module.rules数组中添加如下规则：

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
               'style - loader',
                {
                    loader: 'css - loader',
                    options: {
                        modules: true
                    }
                },
               'sass - loader'
            ]
        }
    ]
}

上述配置中，test指定匹配.scss文件，use数组中style - loader将CSS插入DOM，css - loader处理CSS模块，sass - loader将Sass转换为CSS。