css变更后 map,webpack4系列教程，如何设置css的sourcemap？

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

在webpack中，目前来说，设置js的sourcemap比较容易，但是设置css的sourcemap就困难多了。因为css的表现形式很多，有css、scss、less，scss和less作为特殊的css，是需要特殊处理的。

webpack4系列教程，如何设置css的sourcemap？(图6-1)

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、mini-css-extract-plugin@0.9.0、css-loader@3.5.3、url-loader@4.1.0、less@3.11.1、less-loader@6.1.0、node-sass@4.14.1、sass-loader@8.0.2、postcss@7.0.30、postcss-loader@3.0.0、webpack-px2rem-loader@1.0.2。

基本设置

css-loader、sass-loader、less-loader、还有postcss-loader，都需要添加参数sourceMap:true。所以，基本上来看，就是在webpack.config.js里面，凭空多了很多个sourceMap:true的项目。

对于一个css/scss/less文件来说，有很多个loader，如果其中一个没有配置上sourceMap:true。那就可能是前功尽弃了。而且，通过上面的一个文章，可以看到：postcss里面的px2rem对scss/less文件的sourceMap有影响。

webpack4系列教程，如何设置css的sourcemap？(图6-2)

下面的例子，是个scss的配置，仅供参考。注意：css/scss/less都需要做类似的设置：{

test: /\.scss$/,

include: [path.resolve(__dirname, 'src')], // 限制打包范围，提高打包速度

exclude: /node_modules/, // 排除node_modules文件夹

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

publicPath: '../', //img图片路径

},

},

{

loader:'webpack-px2rem-loader',

options:{

basePx:100,

floatWidth:2,

min:1,

}

},

{

loader: 'css-loader',

options: {

sourceMap: true

}

},{

loader: "postcss-loader",

options: {

sourceMap: true

}

},

{

loader: "sass-loader",

options:{

sourceMap:true,

}

}

]

},

webpack4系列教程，如何设置css的sourcemap？(图6-3)

重点就是满屏幕的sourceMap:true，相关的loader都要加上，除了px2rem和MiniCssExtractPlugin。然后，就是devtool这个值，要配置一个合适的值。在这里，苏南大叔配置的是：devtool: 'inline-source-map',

相关链接：

webpack4系列教程，如何设置css的sourcemap？(图6-4)

整体的效果就是：const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//...

module.exports = {

//...

plugins: [

//...

],

devtool: 'inline-source-map',

module: {

rules: [

{

test: /\.css$/,

use: [

//...

],

},

{

test: /\.scss$/,

include: [path.resolve(__dirname, 'src')], // 限制打包范围，提高打包速度

exclude: /node_modules/, // 排除node_modules文件夹

use: [{

loader: MiniCssExtractPlugin.loader,

options: {

publicPath: '../', //img图片路径

},

},

{

loader: 'webpack-px2rem-loader',

options: {

basePx: 100,

floatWidth: 2,

min: 1,

}

},

{

loader: 'css-loader',

options: {

sourceMap: true

}

}, {

loader: "postcss-loader",

options: {

sourceMap: true

}

},

{

loader: "sass-loader",

options: {

sourceMap: true,

}

}

]

},

{

test: /\.less$/,

use: [

//...

]

},

//...

]

},

}

浏览器调试效果

效果还不错，css的sourcemap调试效果如下：

webpack4系列教程，如何设置css的sourcemap？(图6-5)

webpack4系列教程，如何设置css的sourcemap？(图6-6)

相关链接

总结

在本文中，因为设置了devtool: 'inline-source-map'，可能会影响js的sourcemap调试。这个，具体的以后文章再进行讨论。更多webpack系列文章，请点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。