面试题：Webpack中跨CSS预处理器的统一处理方案

Question

项目中同时存在使用Sass、Less和Stylus的模块，要求通过Webpack实现统一的配置与处理，确保不同预处理器的样式都能正确加载、编译且相互不冲突，你会如何设计和实现这样的方案？

Answer 1

1. 安装相关依赖：
   • 针对Sass，安装node - sass和sass - loader。
   • 针对Less，安装less和less - loader。
   • 针对Stylus，安装stylus和stylus - loader。
   • 同时确保安装了css - loader和style - loader用于处理最终的CSS。
2. Webpack配置： 在webpack.config.js中进行如下配置：

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

3. 样式引入： 在项目中，按照不同模块的预处理器类型，分别引入对应的样式文件。例如：
   • 在使用Sass的模块中：import './styles.scss';
   • 在使用Less的模块中：import './styles.less';
   • 在使用Stylus的模块中：import './styles.styl'; 这样，Webpack就能根据文件的扩展名，通过对应的加载器正确加载、编译不同预处理器的样式，且由于不同预处理器处理的是不同文件，相互之间不会冲突。