本博客不欢迎：各种镜像收集行为请尊重知识产权法律法规。 大家都是程序员，请不要感到不愉快。
在webpack中，目前设置js的源映射相对容易，但设置css的源映射非常困难。 因为css的表现形式很多，所以有css、scss、less。 scss和less作为特殊的css，需要特殊的处理。
webpack4系列教程，如何设置css的源映射？ (图6-1 )
本文测试环境： win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、mini-css-extract-plugin@0.9.0、CSS
基本设定
css-loader、sass-loader、less-loader和postcss-loader必须添加参数sourceMap:true。 所以，基本上，webpack.config.js上有很多sourceMap:true的项目。
如果未配置sourceMap:true，则css/scss/less文件中有很多加载程序。 那可能是前功尽弃了。 此外，在上一篇文章中，您还看到postcss中的px2rem会影响scss/less文件中的sourceMap。
webpack4系列教程，如何设置css的源映射？ (图6-2 )
以下示例是scss的配置。 仅供参考。 注意： css/scss/less也需要类似的设置。 {
test: /.scss$/，
include : [ path.resolve (_ dirname，' src']，//限制封装范围，提高封装速度
排除exclude :/node _ modules//node _ modules文件夹
use: [
{
loader : minicssextractplugin.loader，
选项： {
公共路径： ' ./'，//img图像路径
(，
(，
{
loader : ' web pack-px2 rem-loader '，
选项： {
basePx:100，
浮动窗口：2，
min:1，
}
(，
{
loader: 'css-loader '，
选项： {
source map :真
}
、{
loader: 'postcss-loader '，
选项： {
source map :真
}
(，
{
loader: 'sass-loader '，
选项： {
source map :真，
}
}
]
(，
webpack4系列教程，如何设置css的源映射？ (图6-3 )
重点是满屏的sourceMap:true，相关加载器添加时除px2rem和MiniCssExtractPlugin外。 然后，用devtool这个值配置适当的值。 在这里，苏南大叔布置了dev tool : '在线资源地图'，
相关链接：
webpack4系列教程，如何设置css的源映射？ (图6-4 )
整体效果是： constpath=require('path )；
constminicssextractplugin=require (mini-CSS-extract-plugin )；
//.
module.exports={
//.
plugins: [
//.
]、
dev tool : '在线资源图'，
模块： {
rules: [
{
test: /.css$/，
use: [
//.
]、
(，
{
test: /.scss$/，
include : [ path.resolve (_ dirname，' src']，//限制封装范围，提高封装速度
排除exclude :/node _ modules//node _ modules文件夹
use: [{
loader : minicssextractplugin.loader，
选项： {
公共路径： ' ./'，//img图像路径
(，
(，
{
loader : ' web pack-px2 rem-loader '，
选项： {
basePx: 100，
浮动窗口： 2，
min: 1，
}
(，
{
loader: 'css-loader '，
选项： {
source map :真
}
、{
loader: 'postcss-loader '，
选项： {
source map :真
}
(，
{
loader: 'sass-loader '，
选项： {
source map :真，
}
}
]
(，
{
test: /.less$/，
use: [
//.
]
(，
//.
]
(，
}
浏览器调试效果
很有效。 css的sourcemap调试效果如下：
webpack4系列教程，如何设置css的源映射？ (图6-5 )
webpack4系列教程，如何设置css的源映射？ (图6-6 )
相关链接
总结
本文设置了dev tool : '在线源映射'，因此可能会影响js的源映射调试。 这一点，具体稍后在文章中讨论。 有关webpack系列的详细信息，请单击以下链接：
如果这篇文章对你有帮助，或者节约了你的时间，欢迎你开赏花饮料，建立友谊关系。
我不欢迎这个博客：各种镜像收集行为。 请尊重原始文章的内容，转载请留下作者的链接。