Question

我将webpack配置为转换scss - ＆gt; css，但webpack生成的sourcemap无法解析scss @import s。

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/

Answer 1

您有sass-loader，请将其切换为：

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

那会有效。

Answer 2

在开发模式下，不应使用extractTextPlugin。请为开发和生产模式进行额外配置。在生产中，extractTextPlugin的使用很好但是在开发模式下它没有必要，并且可能导致其他功能无法正常工作。所以改为使用样式加载器。

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

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
                       }
                    }
                ]
            },
        ]
    }
};

Answer 3

在开发模式下Edit->Preference->External Tools没有任何问题，@ Omri Aharon发布的内容是正确的。但是，您应该考虑只能在开发模式下启用源映射。

使用默认生产设置构建webpack（默认情况下，在webpack 2.0+中使用OccurrenceOrderPlugin插件），运行命令ExtractTextPlugin，然后在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 }; }中，让你的scss加载器显示为：

webpack.config.js

我的插件部分有

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

Webpack source-map不解析sass导入

3 个答案: