webpack中sass-loader里node-sass改成sass的终极方案

创建时间:2024-01-23 17:17:12
webpack

在webpack5中如何把sass-loader中使用的node-sass改成sass

我们在很多时候启动了旧项目,里面的webpack用了sass-loader去编译sass文件或者scss文件,但是node-sass是跟node版本强关联的,很多时候我们需要用到node版本切换工具和去node-sass网站查看版本对应记录来修改对应的node-sass依赖,最后发现在开发团队下面,变成了node版本是个强依赖,下面我们改成用sass模块去解决这个问题

// 使用sass-loader的时候加个options,使用implementation把node-sass改成sass,
// 然后执行npm uninstall node-sass
const isDev = process.env.NODE_ENV!=='production'
{
    test: /\.s[ac]ss$/,
    exclude: /\.module\.s[ac]ss$/,
    use: [
        isDev
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader'
        },
        'postcss-loader',
        {
            loader: 'sass-loader',
            options: {
                implementation: require('sass')
            }
        }
    ]
}
备案信息:粤ICP备15107978号