Webpack源映射无法解析Sass导入。

Question

我已经配置了webpack将scss转译成css，但是webpack生成的sourcemap不能解析scss中的@import。

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/

- amik

Answer 1

当您处于开发模式时，不应使用extractTextPlugin。请为开发和生产模式制定额外的配置。在生产中使用extractTextPlugin是可以的，但在开发模式下不必要，可能会导致其他功能无法正常工作。因此，请改用style-loader。

另外，我不确定是否可以解决您的问题，请尝试在css loader上使用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
                       }
                    }
                ]
            },
        ]
    }
};

- Daniel

Answer 2

你有 sass-loader，请将其替换为以下内容：

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

那样会有效果。

- Omri Aharon

---

刚刚注意到目前存在一个错误 https://github.com/webpack-contrib/sass-loader/issues/351，导致它无法与压缩输出一起使用，因此您必须禁用生产构建的sass源映射。但它仍然非常有用！ :) - amik

@amik 的确如此，尽管在生产环境中可能不希望有源代码映射，因为它会增加代码量并增加文件大小。 - Omri Aharon

Answer 3

在开发模式下，ExtractTextPlugin 没有问题，@Omri Aharon 发布的内容是正确的。然而，你应该考虑的是只在开发模式下启用 source-map。

要使用 webpack 的默认生产设置（在 webpack 2.0+ 中默认进行代码压缩和应用 OccurrenceOrderPlugin 插件），请运行命令 webpack -p，然后在你的 webpack.config.js 中，你可以通过以下方式确定你是否处于开发模式：

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]'），

"

- azizj