logo标签列表

如何配置Webpack不将导入的Sass文件内容拉到源映射中？

node.jswebpacksasssource-maps
3
我有一个Sass文件，它导入了Bootstrap和Font Awesome。它们已经在我的自定义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构建完成后有一个源代码映射(source map)，但它包括Bootstrap和Font Awesome的内容。
在浏览器中看起来像这样：

enter image description here

当我尝试检查一个自定义类时，它指向了正确的原始源代码行号，但对于生成的源映射来说是不正确的，因为它在顶部有Bootstrap的内容。
我的问题是：
是否可能配置输出源映射以保留导入语句和内容与实际源代码完全相同。
这里是我期望的源映射：site.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,
    }
};

这是一个示例代码的存储库链接。 codesanook-examples-webpack 谢谢。
1个回答
2
我以前找到过这个工具并尝试安装，但是我没有成功。我会再试一次并让您知道结果。谢谢。 - theeranitp
我已经设置了SourceMapDevToolPlugin但它无法解决我的问题。从这个评论https://github.com/webpack-contrib/mini-css-extract-plugin/issues/123#issuecomment-419195560中我们得知，问题在于将Bootstrap放在Sass文件的顶部。我通过排除Bootstrap并导入我的自定义Sass文件来验证，问题已经消失了。然而，SourceMapDevToolPlugin无法解决问题，但我们可以将Bootstrap排除到其他文件中或使用CDN。另外，关于导入我们的自定义Sass文件，没有源代码地图的问题。再次感谢您的建议。 - theeranitp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接