开发者社区 问答 正文

如何配置 Webpack 以处理 CSS、Less 和 Sass 文件?

如何配置 Webpack 以处理 CSS、Less 和 Sass 文件?

展开
收起
迪哒迪滴喵 2024-08-27 16:02:03 46 发布于天津 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • 首先需要安装相应的 Loader(如 style-loader、css-loader、less-loader、sass-loader)。然后在 webpack.config.js 的 module.rules 中配置规则,例如:

    module: { 
    rules: [ 
    { 
    test: /\.css$/, 
    use: ['style-loader', 'css-loader'], 
    }, 
    { 
    test: /\.(less|css)$/, 
    exclude: /\.module\.less$/, 
    use: [ 
    'style-loader', 
    { 
    loader: 'css-loader', 
    options: { 
    importLoaders: 2, 
    sourceMap: !!DEV, 
    }, 
    }, 
    'less-loader', 
    ], 
    }, 
    { 
    test: /\.(sass|scss)$/, 
    use: [ 
    'style-loader', 
    { 
    loader: 'css-loader', 
    options: { 
    importLoaders: 2, 
    sourceMap: !!DEV, 
    }, 
    }, 
    'sass-loader', 
    ], 
    }, 
    ], 
    }
    
    2024-08-27 17:07:42 举报
    赞同 15 评论

    评论

    全部评论 (0)

    登录后可评论