node.js - 如何配置 Webpack 不将导入的 Sass 文件的内容拉到源映射?
问题描述
我有一个导入 Bootstrap 和 Font Awesome 的 Sass 文件。它们已放在我的自定义 CSS 类之前的文件中。这是代码:
/src/scss/site.scss
@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
// Custom style sheet here
.my-custom-header{
color:#F00
}
Webpack 构建后有一个源映射,但它包含 Bootstrap 的内容和字体真棒。
这是浏览器中的样子:
当我尝试检查自定义类时,它指向正确的原始源代码行号,但对于生成的源映射不正确,因为它在顶部有 Bootstrap 的内容。
我的问题是:
是否可以配置输出源映射以保持导入语句和内容与实际源代码完全相同。
这是我期望的源地图。 站点.css.map
@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
// Custom style sheet here
.my-custom-header{
color:#F00
}
这是我的 Webpack 配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const siteFile = [__dirname, 'src', 'scss', 'site'];
const outputPath = [__dirname, 'public', 'css'];
module.exports = {
entry: {
site: path.resolve(...siteFile),
},
output: {
path: path.resolve(...outputPath),
},
resolve: {
// https://github.com/webpack/webpack-dev-server/issues/720#issuecomment-268470989
extensions: ['.scss']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader', // Translates CSS into CommonJS modules
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: () => {
// post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
},
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader', // Compiles Sass to CSS, using node-sass by default
options: {
sourceMap: true
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '.' //relative to output
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './[name].css' // relative to output
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: false,
port: 8080,
}
};
这是示例代码存储库的链接。
谢谢你。
解决方案
您是否尝试过 SourceMapDevToolPlugin? https://webpack.js.org/plugins/source-map-dev-tool-plugin/
您可能需要为节点模块的东西创建一个供应商包,然后您可以从源映射中忽略它。
推荐阅读
- html - 如何使用 CSS 获得带有边框半径的部分圆形边框?
- maven - GitHub 缓存与子目录中的 Maven 项目
- mysql - SQL - 按同一张表中的 3 列分组,平均
- haskell - Haskell 将 Char 类型转换为自定义类型 Field
- assembly - 是什么决定了使用 NASM mov 指令进出寄存器的存储或检索内存的大小?
- python - Django主键前缀和长度
- sas - 遍历字符列表以导入 xlsx 文件 SAS
- powershell - Powershell 中的 Windows 7 [System.Drawing.Text.FontCollection] 问题
- sql - 为每一天带来最新的价值
- python-3.x - 带有python的2d极坐标直方图