Webpack source-map 无法解析 sass 导入答案

【问题标题】：Webpack source-map does not resolve sass importsWebpack source-map 无法解析 sass 导入
【发布时间】：2018-03-14 22:56:34
【问题描述】：

我已将 webpack 配置为转译 scss -> css，但 webpack 生成的 sourcemap 无法解析 scss @imports。

webpack.config.js：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const outputPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'source-map',
    entry: ['./src/main.scss'],
    target: 'web',
    output: {
        filename: 'js/[name].bundle.js',
        path: outputPath
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: ExtractTextPlugin.extract([
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: true,
                            minimize: true,
                            sourceMap: true,
                        }
                    },
                    'sass-loader'
                ])
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: 'css/[name].bundle.css',
            allChunks: true,
        })
    ]
};

main.scss：

@import 'foo';

_foo.scss：

h1 { color: red; }

但是，在 Chrome 开发工具中，我看到了对 main.scss 的引用，我希望在其中引用 _foo.scss - 请参见下面的屏幕截图：

编译后的演示：http://store.amniverse.net/webpacktest/

【问题讨论】：

标签： css webpack sass source-maps

【解决方案1】：

当您处于开发模式时，您不应该使用 extractTextPlugin。请为开发和生产模式进行额外的配置。在生产中使用 extractTextPlugin 很好，但在开发模式下它不是必需的，并且可能导致其他功能不起作用。所以改为使用样式加载器。

另外 - 我不确定这是否能解决你的问题 - 尝试在 css 加载器上使用 importLoaders 道具。在这里查看更多信息：

https://github.com/webpack-contrib/css-loader#importloaders

const path = require('path');

const outputPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'source-map',
    entry: ['./src/main.scss'],
    target: 'web',
    output: {
        filename: 'js/[name].bundle.js',
        path: outputPath
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: [
                    {
                        loader: 'style-loader',
                        options: {
                          sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: true,
                            minimize: true,
                            sourceMap: true,
                            importLoaders: 1,
                        }
                    },
                    {
                       loader: 'sass-loader',
                       options: {
                         sourceMap: true
                       }
                    }
                ]
            },
        ]
    }
};

【讨论】：

【解决方案2】：

你有sass-loader，用：

{
   loader: 'sass-loader',
   options: {
     sourceMap: true
   }
}

这样就行了。

【讨论】：

刚刚注意到当前存在一个错误github.com/webpack-contrib/sass-loader/issues/351，因此它不能用于压缩输出，因此您必须禁用 sass 源映射以进行生产构建。但是还是很有用的！ :)
@amik 确实，尽管您可能不希望在生产环境中使用源映射，因为它包含更多代码并且会增大大小。

【解决方案3】：

ExtractTextPlugin 在开发模式下没有任何问题，@Omri Aharon 发布的内容是正确的。但是，您应该考虑的是仅在开发模式下启用源映射。

要使用其默认生产设置（在 webpack 2.0+ 中默认使用 OccurrenceOrderPlugin 插件）构建 webpack，请运行命令 webpack -p，然后在您的 webpack.config.js 中，您可以确定您是否在 dev模式与否：

const DEBUG = !process.argv.includes('-p');

添加功能

function cssConfig(modules) {
    return {
        sourceMap: DEBUG,
        modules,
        localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        minimize: !DEBUG
    };
}

在您的 webpack.config.js 中，让您的 scss 加载程序如下所示：

            test: /\.(sass|scss)$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: cssConfig(true)
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: DEBUG }
                    }
                ]
            })
        },

我的插件部分有

new ExtractTextPlugin('[name].css?[contenthash]'),

【讨论】：