代码之家 › 专栏 › 技术社区 › amik

网页包源映射无法解析sass导入

source-maps sass webpack css

6

amik · 技术社区 · 8 年前

我已将网页包配置为传输SCS->css,但由webpack生成的sourcemap无法解析SCS @import

网页包。配置。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,
        })
    ]
};

主要的SCS:

@import 'foo';

h1 { color: red; }

然而,在Chrome开发工具中,我看到了对 main.scss 我希望参考的地方 _foo.scss -请参见下面的屏幕截图:

http://store.amniverse.net/webpacktest/

3 回复 | 直到 8 年前

1

5

Daniel 7 年前

在开发模式下,不应使用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

4

Omri Aharon 8 年前

你有 sass-loader 在那里,切换为:

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

3

1

azizj 8 年前

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加载程序显示为:

            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]'),